Hide/show inner divs on hover in an accordion with jQuery
<p>kindly take a look at my HTML code below:</p>

<pre><code>&lt;div class="accordion"&gt;
&lt;ul&gt;
   &lt;li class="box1"&gt;
     &lt;div class="normal"&gt; CONTENT HERE &lt;/div&gt;
     &lt;div class="expanded"&gt; CONTENT HERE &lt;/div&gt;
     &lt;div class="hidden"&gt; CONTENT HERE &lt;/div&gt;
   &lt;/li&gt;
   &lt;li class="box2"&gt;
     &lt;div class="normal"&gt; CONTENT HERE &lt;/div&gt;
     &lt;div class="expanded"&gt; CONTENT HERE &lt;/div&gt;
     &lt;div class="hidden"&gt; CONTENT HERE &lt;/div&gt;
   &lt;/li&gt;
   &lt;li class="box3"&gt;
     &lt;div class="normal"&gt; CONTENT HERE &lt;/div&gt;
     &lt;div class="expanded"&gt; CONTENT HERE &lt;/div&gt;
     &lt;div class="hidden"&gt; CONTENT HERE &lt;/div&gt;
   &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Basically it's an accordion powered by a jQuery plugin. It has 3 boxes and depending on which box the user is hovering on, I wish to have the inner divs (normal, expanded, hidden) shown or hidden. Here are the scenarios:</p>

<ol>
<li>On default, all div.normal will be shown by default, div.expanded and div.hidden will be hidden.</li>
<li>When user hovers on li.box1 for example, its div.expanded will be shown and div.normal and div.hidden will be hidden. For li.box2 and li.box3 then however, only div.hidden will be shown respectively, the rest of the divs will be hidden.</li>
</ol>

<p>I have begun with the code but I don't think it's going anywhere. (I am a designer, you see.)</p>

<p>It sounds complicated but I know it can be easily done via jQuery, to anyone who can help, I'd really appreciate it.</p>

<p>UPDATE: 
Here's what I've done so far. </p>

<pre><code>$(document).ready(function () {
  $(".accordion li").hover(function () {

    $(this).siblings().children(".normal").hide();
    $(this).siblings()..children(".hidden").delay(700).show();
    $(this).children(".expanded").delay(700).show();

    }, function () {

    $(this).siblings().children(".normal").delay(700).fadeIn("fast");
    $(this).siblings().children(".hidden").fadeOut("fast");
    $(this).children(".expanded").fadeOut("fast");

  });
});
</code></pre>
