title: jquery - toggle visibility of divs inside a div
body: <p>I got a problem with a jQuery function.</p>
  
  <h3>Situation</h3>
  
  <p>I got one div, containing a list of <code>&lt;input type="radio" /&gt;</code> elements. These should remote control the visibility of the other two divs. The first radio input field should show the first div when checked, the other ones should a) the second div and b) only one of the divs inside the second div.</p>
  
  <h3>Problem</h3>
  
  <p>The display (show/hide toggle) between the first &amp; second main divs works fine. What doesn't work is the toggling the visibility state of the divs inside the second div.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      jQuery( document ).ready( function($)
          {
              $( "#post_format_box" ).addClass( "hidden" );
  
              $( "input#post-format-0" ).change( function() {
                  $( "#postdivrich" ).removeClass( "hidden" );
                  $( "#post_format_box" ).addClass( "hidden" );
              } );
  
              $( "input:not(#post-format-0)" ).change( function() {
                  $( "#postdivrich" ).addClass( "hidden" );
                  $( "#post_format_box" ).removeClass( "hidden" );
              } );
  
              $( "#post-format-aside" ).change( function() {
                  $( "#aside" ).removeClass( "hidden" );
              } );
              $( "#post-format-audio" ).change( function() {
                  $( "#audio" ).removeClass( "hidden" );
              } );
              $( "#post-format-chat" ).change( function() {
                  $( "#chat" ).removeClass( "hidden" );
              } );
              $( "#post-format-gallery" ).change( function() {
                  $( "#gallery" ).removeClass( "hidden" );
              } );
              $( "#post-format-image" ).change( function() {
                  $( "#image" ).removeClass( "hidden" );
              } );
              $( "#post-format-link" ).change( function() {
                  $( "#link" ).removeClass( "hidden" );
              } );
              $( "#post-format-quote" ).change( function() {
                  $( "#quote" ).removeClass( "hidden" );
              } );
              $( "#post-format-status" ).change( function() {
                  $( "#status" ).removeClass( "hidden" );
              } );
              $( "#post-format-video" ).change( function() {
                  $( "#video" ).removeClass( "hidden" );
              } );
          }
      );
  &lt;/script&gt;
  </code></pre>
  
  <p>The divs look like this:</p>
  
  <pre><code>&lt;div id="formatdiv"&gt;
  &lt;!-- REMOTE CONTROLING DIV --&gt;
      &lt;!-- SHOWS/HIDES THE #postdivricht --&gt;
      &lt;input type="radio" class="post-format-0" checked="checked" /&gt;
  
      &lt;!-- THESE SHOW/HIDE THE SINGLE DIVS INSIDE #postdivricht --&gt;
      &lt;input type="radio" id="post-format-aside" /&gt;
      &lt;input type="radio" id="post-format-audio" /&gt;
      &lt;input type="radio" id="post-format-chat" /&gt;
      &lt;input type="radio" id="post-format-gallery" /&gt;
      &lt;input type="radio" id="post-format-image" /&gt;
      &lt;input type="radio" id="post-format-link" /&gt;
      &lt;input type="radio" id="post-format-quote" /&gt;
      &lt;input type="radio" id="post-format-status" /&gt;
      &lt;input type="radio" id="post-format-video" /&gt;
  &lt;/div&gt;
  
  &lt;div id="postdivrich"&gt;
      &lt;!-- FIRST REMOTE CONTROLED DIV --&gt;
  &lt;/div&gt;
  
  &lt;div id="post_format_box"&gt;
      &lt;!-- SECOND REMOTE CONTROLED DIV --&gt;
      &lt;div id="aside"&gt;
          &lt;p&gt;Aside&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="audio"&gt;
          &lt;p&gt;Audio&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="chat"&gt;
          &lt;p&gt;Chat&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="gallery"&gt;
          &lt;p&gt;Gallery&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="image"&gt;
          &lt;p&gt;Image&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="link"&gt;
          &lt;p&gt;Link&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="quote"&gt;
          &lt;p&gt;Quote&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="status"&gt;
          &lt;p&gt;Status&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="video"&gt;
          &lt;p&gt;Video&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>