Nested divs -  .change function and show/hide siblings, children and parents
<p>I need to show/hide some divs depending on selected options. I'm using .change function.</p>

<p>HTML looks more-less like this: </p>

<pre><code>&lt;div id="1" style="display:none"&gt;
&lt;/div&gt;
&lt;div id="WRAP"&gt;
  &lt;div id="2" style="display:none"&gt;
  &lt;/div&gt;
  &lt;div id="3" style="display:none"&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div id="4" style="display:none"&gt;
&lt;/div&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>$(function(){
$('#fyo').change(function(){ 
        $('#' + $(this).val()).show('slow').children().show('slow');
        $('#' + $(this).val()).siblings().hide('slow');
        $('#' + $(this).val()).parent().show('slow').siblings().hide('slow');

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

<p>I won't write the code for options but just FYI the options are as follows:</p>

<pre><code>Choose option: 1  or  2  or  3  or 4  or WRAP (so 2 &amp; 3).    
</code></pre>

<p>It should be possible to:</p>

<ol>
<li>show each of these divs separately, including inner divs - with all other divs hidden;</li>
<li><code>&lt;div id="WRAP"&gt;</code> should show all inner divs simultaneously.</li>
</ol>

<p>The result I achieved is (almost) exactly what I needed but as I'm a beginner with jQuery, I was wondering if this is correct? Or is there any easier way to achieve this? There is one thing that makes me doubt that something is actually wrong - when I choose 2 or 3, it doesn't display in the style of <code>'slow'</code>, but instead it's almost immediate and looks like something is wrong because it doesn't come out so smoothly.</p>
