Using 'Hide' and 'show' in a div

Question

I have a div that when I click on it it shows and hides an ul. With the code like this:

<ul class="homeMenuItens">
        <li>
            <div pagina='/produtos/incendio' class="homeMenuPai">Incendio</div>
            <ul id="incendio" class="homeMenuFilhos" style="display:none">
                <li  pagina='paginaSYS' onclick='window.location=\"/paginaSYS\"'>tituloMenuSYS</li>
            </ul>
        </li>
    </ul>

Jquery is like this:

$(".homeMenuPai").click(function() {
    $(".homeMenuFilhos").css('display','none');
    if($(this).parent().find(".homeMenuFilhos").css('display') == 'none'){
        $(this).parent().find(".homeMenuFilhos").show();
    }
    else{
        $(this).parent().find(".homeMenuFilhos").hide();
    }    

});

It’s working, as soon as I click on the Title Menu, for example, it shows the items below. The problem is that if I click Div more than once, it does not hide the items. It only hides when I click the other Divs.

The structure is like this div TITULO ul WITH ITEMS li LIST OF ITEMS

I have 4 equal Ivs

In the image below shows the 4 main menus, if I click on 2, the 1 closes, but if I click on 1 again to close, it does not close.

Answer 1

The problem is that you are setting all the elements .homeMenuFilhos with display = none and then checking if it’s display == none, i.e., the if will always be true. Remove align:

$(".homeMenuPai").click(function() {
    //remova esta linha --> $(".homeMenuFilhos").css('display','none');
    if($(this).parent().find(".homeMenuFilhos").css('display') == 'none'){
        $(this).parent().find(".homeMenuFilhos").show();
    }
    else{
        $(this).parent().find(".homeMenuFilhos").hide();
    }    

});

Or if you want to hide all others and display only the current one do so:

$(".homeMenuPai").click(function() {

   if($(this).parent().find(".homeMenuFilhos").css('display') == 'none'){
        $(".homeMenuFilhos").css('display','none');
        $(this).parent().find(".homeMenuFilhos").show();
   }
   else{
        $(this).parent().find(".homeMenuFilhos").hide();
   }    

});