.show elements and .hide elements
<p>I've got this problem :</p>

<ul>
<li>I have got 6 "outer" div's each have a img tag inside.</li>
<li>Following each 6 div's are another div with content for each 6 divs</li>
</ul>

<p>I want when i click one "outer" div hide all outer div's and show me the next div content.</p>

<p>This is the function. Wich it works there <a href="http://jsfiddle.net/Weinz/jdFRw/4/" rel="nofollow">http://jsfiddle.net/Weinz/jdFRw/4/</a> </p>

<p>But on test site only hide .outerDiv doesn't show next .innerDiv</p>

<pre><code>$(function() {
    $(".outerDiv").click(function() {
        $(".outerDiv").hide();
        $(".innerDiv").hide();
        $(this).next("div").show();
    });
    $(".innerDiv").click(function() {
        $(".outerDiv").show();
        $(".innerDiv").hide();
    });
});
</code></pre>

<p>The real html code is this </p>

<pre><code>&lt;div class="block outerDiv"&gt;&lt;a href="#"&gt;&lt;img src="images/placeholder.jpg" width="165" height="74" alt="Temp" /&gt;&lt;/a&gt;&lt;/div&gt;
     &lt;div class="container innerDiv" style="display:none;"&gt;
</code></pre>

<p>I think the problem is on .next but i try diferent options and nothing work.</p>

<p>If i don't set the display in the innerDiv it works...</p>
