javascript - Hide and show divs with text

Question

I know there are a lot of these threads but none seem to really fit me.

I have 5 dives with text like "this is div1, to div5". These are always gonna be shown. And i have 5 hidden divs with text belonging to each div, that are gonna show if i click on my shown divs.

If I click div1, i want to show the hidden div1.

Right now I'm using a click function(jQuery) for every div which works but doesn't look very good in code. There has to be a better way. Any advise?

I do NOT want any of the divs to be hyperlinks, which seem to be the solution on a lot of similar threads on here.

EDIT: This is my current code.(can't get jsfiddle to work)

html

<div class="showing_div">
<p>This is a showing div</p>
</div>
<div class="hidden_div" style="display: none;>
<p>This div is hidden</p>
</div>

Jquery

$('showing_div').click(function() {

$('hidden_div').toggle();   

})

Answer 1

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.}