Hide/Show multipe divs jquery - show-hide

Question

The following FIDDLE shows my current markup.
HTML
<div class="popup-inner-content main-content">
<div class="inner-section one">
<!-- images -->
<div class="media pull-left">
<img src="#" />
</div>
<!-- text -->
<div class="media-aside pull-right">
<h4>Head</h4>
<p>Body</p>
</div>
</div>
<div class="inner-section three is-hidden">
<!-- images -->
<div class="media pull-left">
<img src="#" />
</div>
<!-- text -->
<div class="media-aside pull-right is-hidden">
<h4>Head</h4>
<p>Body</p>
</div>
</div>
<div class="inner-section two is-hidden">
<!-- images -->
<div class="media pull-left ">
<img src="#" />
</div>
<!-- text -->
<div class="media-aside pull-right">
<h4>Head</h4>
<p>Body</p>
</div>
</div>
<div class="thumbnail pull-left">
<!-- thumbnail -->
<div class="media-thumb one">
<img src="#" alt="media-thumbnail" title="media-thumbnail" />
<p>Anchot text</p>
</div>
</div>
<div class="thumbnail pull-left">
<!-- thumbnail -->
<div class="media-thumb two pull-left">
<img src="#" alt="media-thumbnail" title="media-thumbnail" />
<p>Anchor text</p>
</div>
</div>
<div class="thumbnail is-hidden">
<!-- thumbnail -->
<div class="media-thumb three ">
<img src="#" width="128" height="69" alt="media-thumbnail" title="media-thumbnail" />
<p>Anchor Text</p>
</div>
</div>
</div>
</div>
What I am trying to do is always have two thumbnails divs and only one of the inner-section divs visible at a time and essentially be able to toggle through the inner-section and thumbnail divs when clicking any of the anchors inside the thumbnail div.
How could I achieve this using jquery?

Answer 1

Use this:
http://jsfiddle.net/nHXEs/6/
function displayItem(showItem) {
$('div.thumbnail').show();
$('div.thumbnail .' + showItem).parent().hide();
$('div.inner-section').hide();
$('div.inner-section').filter('.' + showItem).show();
}
$(document).ready(function() {
displayItem('one');
$('div.thumbnail').click(function () {
var showItem = '';
if ($('.media-thumb', $(this)).hasClass('one')) {
showItem = 'one';
} else if ($('.media-thumb', $(this)).hasClass('two')) {
showItem = 'two';
} else {
showItem = 'three';
}
displayItem(showItem);
});
});
Hoply it is what you are looking for.
But i hope so.
It is not the best solution, because you use classes to identify your items, but if you allltimes have exactly 3 thumps and big elements it works.
A better solution will be to uses id`s to identify elements
<div class="thumbnail" id="thump_three">

Answer 2

You haven't explained the logic of how to decide which two thumbnails you want to show but here is a good starting point of what I believe you mean by toggle through which should allow you to expand on it. This would show just one of each element.
The idea is that the JS doesn't need to know about 'one', 'two', 'three' etc and just work for an infinite amount of options.
<p>Anchor text</p>
Give the anchor a reference you can use because finding the classes then working out which will be 'one, 'two', 'three', etc will be a lot more work.
You can do this in a few lines but I've made it obvious what's going on.
$('.thumbnail a').on('click', function(e){
e.preventDefault();
// find the wrapper (.thumbnail) and hide it
var $wrapper=$(this).closest('.thumbnail');
$wrapper.hide();
// find the next one
var $next=$wrapper.next();
// if this was the last one get the first instead
if (!$next.length) $next=$wrapper.siblings().filter(':first');
// show it
$next.show();
// now deal with the element that's elsewhere
var ref=this.href.replace('#','');
$('.inner-section.' + ref).show().siblings().hide();
});
Once you've set this behavior up, to save yourself writing out code again (or needing to define functions) just trigger a click on an anchor in the last element so it makes the first one show.
$('.thumbnail:last a').trigger('click');