CODEWITHSUNDEEP
jqueryhtmlhrefshow-hide
rws907
rws907

Reputation: 777

Using jQuery with HTML Text Links to Show/Hide Multiple DIVs

I'm creating a menu page for a local restaurant. At the top of the page of text based links for each portion of the menu such as:

Appetizers | Soups and Salads | Entrees

The HTML markup for these is:

<a id="show_apps">Appetizers</a> | <a id="show_soups">Soups and Salads</a> | <a id="show_entrees">Entrees</a>

My CSS is setup like this:

#menu_container{
  width: 650px;
  height: auto;
  padding-left: 30px;
}

#menu_container div{display:none;}

And the Menu Sections are setup like this

<div id="menu_container">
  <div id="menu_apps">
    Content of the App Section Here
  </div>
  <div id="menu_soups">
    Content of the Soups Section Here
  </div>
  <div id="menu_entrees">
    Content of the Entrees Section Here
  </div>
</div>

What I am trying to find a solution for is when someone clicks on the link for each section it will show that DIV but if they click on another section, it will replace the currently viewed div with the next one. Example: User clicks on "Appetizers" and that DIV loads then clicks on "Soups and Salads" and the "Appetizers" DIV is closed and the "Soups" DIV is shown, so that multiple divs aren't visible at once. I have been toying around with show(), hide(), and even toggle() but I can't figure out how to get the end result of clicking on the other links to re-hide and ONLY show the targeted DIV. I hope this makes sense.

TIA for any insight!

Upvotes: 2

Views: 11202

Answers (4)

user2663401
user2663401

Reputation:

you can do it in simple way. check the below code

HTML

<a id="apps" class="anchorLinks" href="#">Appetizers</a> | <a id="soups" class="anchorLinks" href="#">Soups and Salads</a> | <a id="entrees" class="anchorLinks" href="#">Entrees</a>

<div id="menu_container">
  <div id="menu_apps">
    Content of the App Section Here
  </div>
  <div id="menu_soups">
    Content of the Soups Section Here
 </div>
 <div id="menu_entrees">
    Content of the Entrees Section Here
  </div>
</div>

jQuery

$('.anchorLinks').click(function () {
    $('#menu_container>div').hide();
    $('#menu_'+$(this).attr('id')).show();
});

Upvotes: 0

Sandeep.sarkar
Sandeep.sarkar

Reputation: 130

check this out jsFiddle

<div id='nav'>
    <a id="show_apps">Appetizers</a> | <a id="show_soups">Soups and Salads</a> | <a id="show_entrees">Entrees</a>
</div>


$(document).ready(function(){
   $("#nav a").click(function(){
      var id =  $(this).attr('id');
      id = id.split('_');
      $("#menu_container div").hide(); 
      $("#menu_container #menu_"+id[1]).show();
   });
});

Upvotes: 2

iShurf
iShurf

Reputation: 31

Try this:

$(document).ready(function () {
    $("#menu_apps").slideUp("fast");
    $("#menu_entrees").slideUp("fast");
    $("#menu_soups").slideUp("fast");

    $("#show_apps").click(function (){
        $("#menu_entrees").slideUp("fast");
        $("#menu_soups").slideUp("fast");
        $("#menu_apps").slideToggle("fast");
    });
    $("#show_entrees").click(function (){
        $("#menu_apps").slideUp("fast");
        $("#menu_soups").slideUp("fast");
        $("#menu_entrees").slideToggle("fast");
    });
    $("#show_soups").click(function (){
        $("#menu_apps").slideUp("fast");
        $("#menu_entrees").slideUp("fast");
        $("#menu_soups").slideToggle("fast");
    });
});

jsfiddle

Upvotes: 1

Cris
Cris

Reputation: 13351

This code will help you,you can make it combine in 1 function though,i havent done it for sake of your understanding.

$(document).ready(function(){

    $("#show_apps").click(function(){
         $("#menu_apps").show();
         $("#menu_soups").hide();
         $("#menu_entrees").hide();
    });

    $("#show_soups").click(function(){
         $("#menu_apps").hide();
         $("#menu_soups").show();
         $("#menu_entrees").hide();
    });

    $("#show_entrees").click(function(){
         $("#menu_apps").hide();
         $("#menu_soups").hide();
         $("#menu_entrees").show();
    });
});

Upvotes: 1

Related Questions