Question

i´m trying to make a menu that if you click on one item it displays divs of the specific class and hide all the others.

This is what I have made:

    <ul class="pdf_documents clearfix">
        <li class="tab-periodicos active"><a href="javascript:void(0)">Informes periódicos</a></li>
        <li class="tab-folletos"><a href="javascript:void(0)">Folleto/DFI</a></li>
        <li class="tab-fichas"><a href="javascript:void(0)">Fichas</a></li>
        <li class="tab-accionistas"><a href="javascript:void(0)">Junta de accionistas</a></li>
        <li class="tab-otros"><a href="javascript:void(0)">Otros</a></li>
    </ul>

    <div class="pdf_box clearfix">
        <div class="pdf_file periodicos">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Último informe anual</p>
        </div>
        <div class="pdf_file periodicos">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Último informe semestral</p>
        </div>
        <div class="pdf_file periodicos">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Último informe trimestral</p>
        </div>
        <div class="pdf_file periodicos">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Penúltimo informe trimestral</p>
        </div>
        <div class="pdf_file folletos">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Folleto simplificado</p>
        </div>
        <div class="pdf_file folletos">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Folleto completo</p>
        </div>
        <div class="pdf_file fichas">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Ficha mensual</p>
        </div>
        <div class="pdf_file fichas">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Ficha comercial</p>
        </div>
        <div class="pdf_file accionistas">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Convocatoria</p>
        </div>
        <div class="pdf_file accionistas">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Propuestas</p>
        </div>
        <div class="pdf_file accionistas">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Informe técnico</p>
        </div>
        <div class="pdf_file otros">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Otros</p>
        </div>
    </div>

CSS:

.pdf_box .folletos{ 
    display:none; 
}

And this is the script that I have written:

    $('.tab-periodicos').click(function(e){
        $('.pdf_documents li').removeClass('active');
        $(this).addClass('active');    
        $('.pdf_box .folletos').hide();
        $('.pdf_box .periodicos').fadeIn();
    });
    $('.tab-folletos').click(function(e){
        $('.pdf_documents li').removeClass('active');
        $(this).addClass('active');
        $('.pdf_box .periodicos').hide();
        $('.pdf_box .folletos').fadeIn();
    });

The problem with the script is that I think it should be an easy way just to point out to fadeIn one div class and hide the other items, instead of writing every div class to hide which make the script pretty big.

Any ideas on how to simplify it?

Answer 1

Get your the divs according to your li class

$('.pdf_documents li').click(function(){
    $('li.active').removeClass('active'); // remove active class
    var c = $(this).attr('class').split('-')[1]; // used to get correct divs
    var $ele = $('.pdf_box div.'+c); // the divs you want
    $('.pdf_box div').not($ele).hide(); // hide all other divs
    $ele.show(); // show your divs
    $(this).addClass('active'); // add active to current li
});​

http://jsfiddle.net/TWAK2/