CODEWITHSUNDEEP
jquery
Phil
Phil

Reputation: 1662

How to show/hide multiple elements in Jquery

I am currently creating a type of menu that will contain sub-menus, when a menu item is selected the sub-menu for that particular menu item will appear and any other open sub-menu will be closed.

Each of the menu lists is displayed inline so that they sit next to each other with 3 in a line, the sub-menu will then appear directly underneath spanning the whole width of the page and push the rest of the menu down the page.

I am having trouble making it so that when Item 1 is pressed only sub-menu 1 shows, and so on. Currently when any item is pressed, sub-menu 1 will be shown.

Below is the html...

<ul id="menu">
        <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<div class="sub-menu 1">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu 2">
        <ul>
            <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu 3">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>   




<ul id="menu">
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

<div class="sub-menu 4">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu 5">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu 6">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

Below is the jquery

$(document).ready(function(){
    $("#menu > li").toggle(
    function(){

             $("#buying-guide-homepage > li").animate({height:109},"slow");
             $(".sub-menu 1").slideDown("slow");

        },
        function(){

        $(".sub-menu 1").slideUp("slow");
        $("#buying-guide-homepage > li").animate({height:89},"slow");

        });
 });

Upvotes: 1

Views: 3384

Answers (3)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

If you change your html like this:

<ul id="menu">
     <li id='sub-menu1'>Item 1</li>
    <li id='sub-menu2'>Item 2</li>
    <li id='sub-menu3'>Item 3</li>
</ul>

<div class="sub-menu1">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu2">
        <ul>
            <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu3">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>   




<ul id="menu">
    <li id='sub-menu4'>Item 4</li>
    <li id='sub-menu5'>Item 5</li>
    <li id='sub-menu6'>Item 6</li>
</ul>

<div class="sub-menu4">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu5">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

<div class="sub-menu6">
    <ul>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
        <li>Sub-menu item</li>
    </ul>
</div>

You could do:

$('div[class^="sub-menu"]').hide();
$("#menu > li").click(function(event){
    var id = event.target.id;
    console.log(id);
    $('div[class^="sub-menu"]').hide();
    $('div[class="'+id+'"]').show();

});

fiddle here: http://jsfiddle.net/ZEKNM/

EDIT - UPDATE to hide the displayed menu on click

$('div[class^="sub-menu"]').hide();
$("#menu > li").click(function(event){
    var id = event.target.id;
    var div =  $('div[class="'+id+'"]');  
    if(div.is(':visible')){
       div.hide();
     }else{
       $('div[class^="sub-menu"]').hide();
       div.show();
      }

});

Updated fiddle here: http://jsfiddle.net/ZEKNM/1/

Upvotes: 1

jbabey
jbabey

Reputation: 46647

http://jsfiddle.net/dNcpJ/1/

There is probably a better way to select which menu to show, I just took the inner text of the top level menu as the ID of the sub menus.

Upvotes: 0

Todd
Todd

Reputation: 1882

I believe the problem is the spaces you have between .sub-menu and the number. If you change your code to use .sub-menu-1 .sub-menu-2 and so on, I think you'll find it works.

The reason I think this is the case is because a space denotes applying a second class to that object in the DOM. So your .sub-menu 1 is really two classes, sub-menu and 1. You could also just select by .1 and you'd get the proper element. If you try just doing $(".sub-menu 1").html("CHANGED THE HTML"); you will see nothing changes. But if you change it to $(".1").html("CHANGED"); or change the class name to sub-menu-1 and then do $(".sub-menu-1").html("CHANGED"), it will work too.

Upvotes: 2

Related Questions