Question

This is what my data looks like:

<div class="shower">
</div>
<div class="container">
    <div class="box">
        <div class="hider">
        </div>
    </div>
</div>
<div class="shower">
</div>
<div class="container">
    <div class="box">
        <div class="hider">
        </div>
    </div>
</div>

Onclick of hider I want to hide() .container and show .shower that’s located before closest .container. Onclick of .shower I want to hide .shower that was clicked and show next .container.

How would I achieve this in jquery? Should I restructure my html?

Answer 1

Something like this:

$('.hider').click(function(e) {
  var container = $(this).parent().parent();
  container.hide();
  var shower = container.prev();
  shower.show();
})

jsFiddle:

• http://jsfiddle.net/eqDWk/

Or this if you want to use closest:

$('.hider').click(function(e) {
  var container = $(this).closest('.container');
  container.hide();
  var shower = container.prev();
  shower.show();
})

jsFiddle:

• http://jsfiddle.net/eqDWk/1/