How can I have a child element manipulate parents sibling?
<p>This is what my data looks like:</p>

<pre><code>&lt;div class="shower"&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
    &lt;div class="box"&gt;
        &lt;div class="hider"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="shower"&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
    &lt;div class="box"&gt;
        &lt;div class="hider"&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>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.</p>

<p>How would I achieve this in jquery? Should I restructure my html?</p>
