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

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();
});​