[Solved] Hide and show divs with text

by


This are the most used techniques:

target element using .index() and .eq()

<div id="clickables">
    <div>CLICK 1</div>
    <div>CLICK 2</div>
</div>

<div id="togglables">
    <div>text 1</div>
    <div>text 2</div>
</div>


$(function(){

    $("#clickables div").click(function(){
         var idx = $(this).index();
         $('#togglables div').eq( idx ).slideToggle();
    });

});

Pros: you can keep a really clean HTML markup, no need to assign additional classes or ID
Cons: don’t put other elements inside the parents otherwise you might mess the index count

target element using .next() or other jQuery traversal methods

<div id="menu">
    <div class="clickable">CLICK 1</div>
    <div>text 1</div>
    <div class="clickable">CLICK 2</div>
    <div>text 2</div>
</div>


$(function(){

    $("#menu .clickable").click(function(){
         $(this).next('div').slideToggle();
    });

});

target specific element using ID

    <div class="clickable" id="_1" > CLICK 1 </div>
    <div class="clickable" id="_2" > CLICK 2 </div>

    <div id="togglable_1"> text 1 </div>
    <div id="togglable_2"> text 2 </div>


$(function(){

    $(".clickable").click(function(){
         $("#togglable"+ this.id).slideToggle();
    });

});

Pros: You can target elements unlogically positioned in the DOM
Cons: Verbose HTML; Unflexible and hardly maintainable code.

3

solved Hide and show divs with text