How can i make a list menu "collapsible"?

Question

i have a menu with 4 main items and each one having 3 to 5 sub items.

<ul id="navigation">
    <li><a>Diagonóstico</a>

    </li>
    <li class="sub"><a href="javascript:void(0);" class="sub_di1"> › Grátis (na compra de qualquer serviço) </a>

    </li>
    <li><a>Hardware</a> 
    </li>
    <li class="sub"><a href="javascript:void(0);" class="sub_ha1"> › Instalação/Configuração de Componentes</a>

Please check the full code.

As you can see in the jsFiddle, all menu items, when clicked show some text in another div. I put that there just in case it was be needed for further javascript help. What i want is to have all .sub menus collapsed and when i mouseover one of the main ones, it expands the corresponding .sub items so user can see. Thanks!

EDIT:

I managed to get a nice tutorial in one of the comments and came up with THIS!

What i need now is a way to show ALL the .sub menus from the corresponding .main menus instead of only the first ones.

Are you specifically looking for a javascript solution? You can accomplish this with CSS and some adjustment to your HTML if you like. — Dave, Apr 14 '13 at 22:52
@dentaku i managed to get a nice script to work from the video above, i just need a bit tweak and i'll be good to go. (: — Bruno Charters, Apr 14 '13 at 23:02
@auicsc I used that tutorial and came up with something really neat, altho still need some tweaks. — Bruno Charters, Apr 14 '13 at 23:08
@BrunoCharters Glad to hear it. If you're ever interested in a straight CSS solution, look into the :hover psuedo-class. :) — Dave, Apr 14 '13 at 23:12
you don't have to bind so many click handlers to `.sub_*` elements. — Ejaz, Apr 14 '13 at 23:13
@Ejay thos don't relate to the menu collapsing at all. except you're there's a way to handle the .sub_* clicks with fewer handlers if that's what you mean. — Bruno Charters, Apr 14 '13 at 23:19

João Mosmann · Accepted Answer · 2013-04-15T12:42:21.153

Using only HTML and CSS.

HTML

<ul id="menu">
    <li><a href="SOME_LINK">Some menu without sub-menu</a></li>
    <li><a href="SOME_LINK2">Some menu without sub-menu 2 </a></li>
    <li>Some menu WITH sub-menu
        <ul>
            <li><a href="SOME_LINK">Some sub-menu</a></li>
            <li><a href="SOME_LINK">Some sub-menu 2</a></li>
        </ul>
    </li>
    <li><a href="SOME_LINK3">Some menu without sub-menu 3</a></li>
</ul>

CSS

ul>li>ul{display:none}
ul>li:hover>ul, ul>li:selected>ul{display:block}

JS (jQuery) to OPEN all submenus

$('#menu li>ul').parent().addClass('selected');

JS without Jquery

var menus = document.getElementById('menu').getElementsByTagName('li') 
for(var row in menus){
     if(typeof menus[row] == 'object' && menus[row].getElementsByTagName('ul').length > 0){
         menus[row].getElementsByTagName('ul')[0].className = 'selected';
     }
}

that'd be the correct solution sir. thanks. i'm marking as correct altho, if you know what i could do to tweak my js into showing ALL submenus. tell me. — Bruno Charters, Apr 15 '13 at 01:43
i couldn't get that to work . weirdly . i all looks right tho . can you make me a jsfiddle ? — Bruno Charters, Apr 17 '13 at 22:29

score 1 · Answer 2 · answered Aug 18 '14 at 08:45

My solution is similar to the one mentioned in the question edit, but an already open list item does not re-open when beging clicked: http://jsfiddle.net/g5oc0uoq/

$('.content').hide();
$('.listelement').on('click', function(){
  if(!($(this).children('.content').is(':visible'))){
    $('.content').slideUp();
    $(this).children('.content').slideDown();
  } else {
    $('.content').slideUp();
  }
});

show() and hide() can be used instead of slideUp() and slideDown() if you have performance issues.

How can i make a list menu "collapsible"?

2 Answers2