jQuery Show/hide multiple div using buttons

Question

Sorry for asking a very basic question and I am very new to jQuery. I have a following piece of HTML

<!DOCTYPE html>
<html>
<head>
    <title>Test Div</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
    <nav> 
    <div id='menu'> 
    <img src='img/Navigation/home.png' title='Home' alt='' /> 
    <img src='img/Navigation/info.png' id="aboutUs" title='About Us' alt='' /> 
    <img src='img/Navigation/gallery.png' id="portfolio" title='Portfolio' alt='' /> 
    <img src='img/Navigation/facebook.png' title='Follow us' alt='' /> 
    <img src='img/Navigation/contact.png' id="contactUs" title='Contact Us' alt='' /> </div>
  </nav>
  <div style="clear:both"></div>
  <div id="contactUs" style="height:300px; width:300px; background-color:#999; display:none;">Contact Us</div>
  <div id="portfolio" style="height:300px; width:300px; background-color:#999; display:none;">Portfolio</div>
  <div id="aboutUs" style="height:300px; width:300px; background-color:#999; display:none;">About Us</div>
</body>
</html>

I want to show contactUs, portfolio and aboutUs Divs to be displayed on clicking corresponding buttons.

I searched for tons of examples online still can't make it work.

You don't have any buttons

Smern
– Smern

2013-05-07 18:20:51 +00:00
Commented May 7, 2013 at 18:20 — Smern
– Smern, Commented May 7, 2013 at 18:20
you have multiple elements with the same id's

Smern
– Smern

2013-05-07 18:22:41 +00:00
Commented May 7, 2013 at 18:22 — Smern
– Smern, Commented May 7, 2013 at 18:22

hunter · Accepted Answer · 2013-05-07 18:27:08Z

2

$("#content > div").hide();

$("#menu a").click(function(){
    $("div#" + $(this).attr("id")).show();
});

You have a problem with using the same id for your img tags and your div tags

Try something like this:

<body>
    <nav> 
        <div id='menu'> 
            <a><img src='img/Navigation/home.png' title='Home' alt='' /> 
            <a href="#contactUs"><img /></a>
            <a href="#portfolio"><img /></a>
        </div>
    </nav>
    <div style="clear:both"></div>
    <div id="content">
        <div id="contactUs">Contact Us</div>
        <div id="portfolio">Portfolio</div>
        <div id="aboutUs">About Us</div>
    </div>
</body>

$("#content > div").hide();

$("#menu a[href]").click(function(){
    $("#content " + $(this).attr("href")).show().siblings().hide();
});

edited May 7, 2013 at 18:27

answered May 7, 2013 at 18:22

hunter

63.8k19 gold badges115 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2359466 Over a year ago

Thanks a lot hunter the code works great. I was wondering if there is any way to remove the 'a' tags and work directly from the img. The a tags are making an unwanted refresh in UI.

user2359466 Over a year ago

Now I added <a href='#home'><img src='img/Navigation/home.png' title='Home' alt='' /></a> in the HTML and want to hide the DiVs which is currently open. The script now looks like $(function(){ $("#content > div").hide(); $("#menu a[href]").click(function(){ $("#content " + $(this).attr("href")).show().siblings().hide(); }); $("#home").click(function(){ $("#content > div").hide(); }); }); This is not working. What I did wrong?

Collectives™ on Stack Overflow

jQuery Show/hide multiple div using buttons

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related