How can I toggle multiple divs on click

Question

I've previously asked a similar question to this, the answers of which partially solved my issue.

However now I need to expand on the code.

This code toggles the visibility of the divs when there are only two, but when adding a third, it shows both the second and third sets of divs together when I want to show each set individually'

This fiddle shows what currently happens; http://jsfiddle.net/richarde/vCjPL/

jQuery

$('.media-thumb a').click(function(){
    $('div[class^="media"]').toggleClass('is-hidden');
    return false;
});

Markup (the click event is bound to anchor of these divs)

<div class="media-thumb ">
    <img src="thumb.jpg" />
    <p><a href="#">Link 1</a></p>
</div>
<div class="media-thumb is-hidden">
    <img src="thumb.jpg" />
    <p><a href="#">Link 2</a></p>
</div>
<div class="media-thumb is-hidden">
    <img src="thumb.jpg" />
    <p><a href="#">Link 3</a></p>
</div>

Now I need to expand on the above and I'm not sure my current approach is the best. What could I do to make this work in my situation?

Thanks in advance.

Answer 1

Update: I completely changed the answer based on new information added to the question.

It sounds like the <a> elements should act like a "next" buttons.

I changed the HTML to have the third elements:

<!-- thumbs -->
<div class="media-thumb ">
    <img src="thumb.jpg" />
    <p><a href="#">Link 1</a></p>
</div>
<div class="media-thumb is-hidden">
    <img src="thumb.jpg" />
    <p><a href="#">Link 2</a></p>
</div>
<div class="media-thumb is-hidden">
    <img src="thumb.jpg" />
    <p><a href="#">Link 3</a></p>
</div>

<!-- images -->
<div class="media pull-left">
    <img src="img.jpg" />
</div>
<div class="media pull-left is-hidden">
    <img src="img.jpg" />
</div>
<div class="media pull-left is-hidden">
    <img src="img.jpg" />
</div>

<!-- text -->
<div class="media-aside">
    <h4>heading 4</h4>
    <p>Text...</p>
    <p class="call-to-action"><a href="someurl">url</a></p>
</div>
<div class="media-aside is-hidden">
    <h4>heading 5</h4>
    <p>Paragraph...</p>
    <p class="call-to-action"><a href="someurl">url</a></p>
</div>
<div class="media-aside is-hidden">
    <h4>heading 6</h4>
    <p>Paragraph...</p>
    <p class="call-to-action"><a href="someurl">url</a></p>
</div>​

This JavaScript will cycle through the elements. If "Link 1" is clicked, then "Link 2", the second img.media.pull-left image and the second div.media-aside will be shown. If "Link 2" is clicked, the third elements from the thumbs, images and text sections will be show, etc.

var $divs = $('.media-thumb'),
    $imgs = $('.media'),
    $txts = $('.media-aside'),
    sets = [],
    max = $divs.length,
    cur = 0,
    i = 0,
    $temp;

// create jQuery objects that contains the .media-thumb, .media,
// and .media-aside HTML elements that should be showing at the
// same time. IE, a jQuery object with the 1st .media-thumb, the 1st
// .media, etc.

for (; i < max; i++) {
    sets[i] = $divs.eq(i)
        .add($imgs.eq(i))
        .add($txts.eq(i));
}

// when the <a> is clicked, turn off the current set
// and turn on the next set
$divs.on('click', 'a', function() {
    sets[cur].addClass('is-hidden');
    cur = ++cur % max;
    sets[cur].removeClass('is-hidden');
});

A jsFiddle demo: http://jsfiddle.net/TvK53/

Answer 2

If I understood correctly, clicking on 1st link, should make 2nd div appear and clicking on 2nd link, should make 3rd div appear and so on.

If so, then try this:

$('.media-thumb a').click(function(){
    var parentDiv=$(this).parents('div.media-thumb');
    $(parentDiv).toggleClass('is-hidden');
    if($(parentDiv).next('div.media-thumb').length){
       //there is next div.media-thumb; make it visible
       $(parentDiv).next('div.media-thumb').toggleClass('is-hidden'); 
    }else{
        //back to first div
        $('div.media-thumb:first').toggleClass('is-hidden');
    }
    return false;
});​

Here is the jsfiddle

Now depending on whether you want the divs to take up space or not, make your css class .is-hidden{ visibility: hidden} or .is-hidden{display: none}

Answer 3

And if i understand correctly what you want, this example is something like this - http://jsfiddle.net/UYLkh/

$('.media-thumb a').each(function(key, el){
    $(el).click(function(){
        $(this).closest('div').toggleClass('is-hidden');
        return false;
    });
});