Jquery menu ul toggle

Question

I have this menu:

           <ul id="submenu" class="clearfix">
                <li><a href="javascript:void(0)">Vedella</a></li>
                <li><a href="javascript:void(0)">Minis de vedella</a></li>
                <li><a href="javascript:void(0)">Vaca</a></li>
                <li><a href="javascript:void(0)">Poltre</a></li>
                <li><a href="javascript:void(0)">Porc Ibèric</a></li>
                <li><a href="javascript:void(0)">Pollastre</a></li>
                <li><a href="javascript:void(0)">Gall d´indi</a></li>
                <li><a href="javascript:void(0)">Bou</a></li>
            </ul>

Each of the "#submenu" li fadeIn an ul sublist and hide the other sublists.

This are the sublist:

            <ul class="sublist first_sublist">
                <li><a href="javascript:void(0)">Normal </a></li>
                <li><a href="javascript:void(0)">All i Julivert</a></li>
                <li><a href="javascript:void(0)">Formatge Roquefort</a></li>
                <li><a href="javascript:void(0)">Ceba</a></li>
            </ul>

            <ul class="sublist second_sublist">
                <li><a href="javascript:void(0)">Mini-Hamburgueses</a></li>
                <li><a href="javascript:void(0)">Surtit Mini-Hamburgueses</a></li>
            </ul>

            <ul class="sublist third_sublist">
                <li><a href="javascript:void(0)">Normal</a></li>
            </ul>

            <ul class="sublist fourth_sublist">
                <li><a href="javascript:void(0)">Poltre</a></li>
            </ul>

            <ul class="sublist fifth_sublist">
                <li><a href="javascript:void(0)">Porc ibèric de Gla</a></li>
            </ul>

and this css:

    .second_sublist, .third_sublist, .fourth_sublist, .fifth_sublist, .sixth_sublist{
        display: none;
    }

with this script:

$('#submenu li').click{
    $('#submenu li').removeClass('active');
    $(this).addClass('active');    
    $('.sublist.second_list').hide();
    $('.sublist.first_list').fadeIn();
});

The problem with the script is that it will get bigger if i have five sublists, cause i will have to make every click function per "#submenu" li.

Can someone help me to make it simple?

Answer 1

This is the approach I would take:

Update: I forgot to mention, you could also get rid of the clearfix class.

HTML

<ul id="submenu" class="clearfix">
    <li><a href="javascript:void(0)">Vedella</a></li>
    <li><a href="javascript:void(0)">Minis de vedella</a></li>
    <li><a href="javascript:void(0)">Vaca</a></li>
    <li><a href="javascript:void(0)">Poltre</a></li>
    <li><a href="javascript:void(0)">Porc Ibèric</a></li>
    <li><a href="javascript:void(0)">Pollastre</a></li>
    <li><a href="javascript:void(0)">Gall d´indi</a></li>
    <li><a href="javascript:void(0)">Bou</a></li>
 </ul>

<ul class="sublist">
    <li><a href="javascript:void(0)">Normal </a></li>
    <li><a href="javascript:void(0)">All i Julivert</a></li>
    <li><a href="javascript:void(0)">Formatge Roquefort</a></li>
    <li><a href="javascript:void(0)">Ceba</a></li>
</ul>

<ul class="sublist">
    <li><a href="javascript:void(0)">Mini-Hamburgueses</a></li>
    <li><a href="javascript:void(0)">Surtit Mini-Hamburgueses</a></li>
</ul>

<ul class="sublist">
    <li><a href="javascript:void(0)">Normal</a></li>
</ul>

<ul class="sublist">
    <li><a href="javascript:void(0)">Poltre</a></li>
</ul>

<ul class="sublist">
    <li><a href="javascript:void(0)">Porc ibèric de Gla</a></li>
</ul>

JavaScript

$('#submenu li').on('click',function(){
    $this = $(this);
    // move active class to current list item
    $this.addClass('active').siblings().removeClass('active');
    // make sure all the sublists are hidden,
    // then determine the position of the list item
    // in the ul, and select the corresponding sublist
    // ex: selecting the 2nd list item in submenu would
    // find the 2nd sublist and fadeIn
    $('.sublist').hide().eq($this.index()).fadeIn();
});

Of course, this means the sublists would have to be in the same order as the submenu list items.

Answer 2

Check this fiddle

Use the HTML-5 data attributes to store the corresponding sublists in them.. Approaching this way you can use a single handler to show/hide the sublists on the page.

HTML

 <ul id="submenu" class="clearfix">
    <li><a href="javascript:void(0)" data-class="first_sublist">Vedella</a></li>
    <li><a href="javascript:void(0)" data-class="second_sublist">Minis de vedella</a></li>
    <li><a href="javascript:void(0)" data-class="third_sublist">Vaca</a></li>
    <li><a href="javascript:void(0)" data-class="fourth_sublist">Poltre</a></li>
    <li><a href="javascript:void(0)" data-class="fifth_sublist">Porc Ibèric</a></li>
    <li><a href="javascript:void(0)" data-class="first_sublist">Pollastre</a></li>
    <li><a href="javascript:void(0)">Gall d´indi</a></li>
    <li><a href="javascript:void(0)">Bou</a></li>
 </ul>

Javascript

$('#submenu li a').on('click',function() {
    var $this = $(this);
    var className = $this.data("class");
    $('#submenu li a').removeClass('active');
    $this.addClass('active');
    $('.sublist').hide();

    $('.'+ className).show();
});​

Answer 3

Use this if you have done your structure this way or if you change this way:

<ul id="submenu" class="clearfix">
    <li><a href="javascript:void(0)">Vedella</a>
        <ul class="sublist first_sublist">
            <li><a href="javascript:void(0)">Normal </a></li>
            <li><a href="javascript:void(0)">All i Julivert</a></li>
            <li><a href="javascript:void(0)">Formatge Roquefort</a></li>
            <li><a href="javascript:void(0)">Ceba</a></li>
        </ul>
    </li>
</ul>


$('#submenu li').click(function(){
    $('#submenu li').removeClass('active');
    $(this).addClass('active');    
    $('.sublist.second_list').hide();
    $('ul',this).fadeIn();
});

Answer 4

Use class instead of id for binding event so that you do not need id for binding the click event.

$('.clearfix li').click(function(){
    $('#submenu li').removeClass('active');
    $(this).addClass('active');    
    $('.sublist.second_list').hide();
    $('.sublist.first_list').fadeIn();
});