title: How to show/hide specific multi-level nested divs with jquery?
body: <p>i'm stuck with this problem: I want to show specific div's depending on the choice of the user. The div's are nested and best should be targeted by some id.</p>
  
  <p>This is the algorithm/sitemap i want to visualize on the screen:</p>
  
  <p><a href="https://i.stack.imgur.com/BZoEz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BZoEz.png" alt="Navigation/sitemap"></a>
  </p>
  
  <p>And this is my first draft:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="buttons"&gt;
      &lt;button class="showButton" target="1"&gt;Button 1&lt;/button&gt;
      &lt;button class="showButton" target="6"&gt;Button 2&lt;/button&gt;
      &lt;button class="showButton" target="3"&gt;Button 3&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="div1" class="targetDiv"&gt;Content of div 1.&lt;br /&gt;
      &lt;button class="showButton" target="4"&gt;open 4&lt;/button&gt;
      &lt;button class="showButton" target="5"&gt;open 5&lt;/button&gt;
      &lt;div id="div4" class="targetDiv"&gt;This is div 4.&lt;/div&gt;
      &lt;div id="div5" class="targetDiv"&gt;This is div 5.&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="div2" class="targetDiv"&gt;Content of div 2.&lt;br/&gt;
      &lt;button class="showButton" target="9"&gt;open 9&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="div3" class="targetDiv"&gt;Content of div 3.&lt;br/&gt;
      &lt;button class="showButton" target="6"&gt;open 6&lt;/button&gt;
      &lt;div id="div6" class="targetDiv"&gt;Content of div 6.&lt;br /&gt;
          &lt;button class="showButton" target="9"&gt;open 9&lt;/button&gt;
          &lt;button class="showButton" target="10"&gt;open 10&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>jQuery(function () {
      jQuery('.showButton').click(function () {
          jQuery('.targetDiv').hide();
          jQuery('#div' + $(this).attr('target')).show('slide');
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/5TDg9/6E2Gv/" rel="nofollow noreferrer">http://jsfiddle.net/5TDg9/6E2Gv/</a></p>
  
  <p>If you click on button in div 2, the div 9 should show up.</p>
  
  <p>Any ideas?</p>
  
  <hr>
  
  <p>added on 30.03.14:</p>
  
  <p>For more detailed explanation, i want to show you an example of usage for the script:</p>
  
  <p>Imagine this algorithm for example :</p>
  
  <p><img src="https://i.stack.imgur.com/xRgUK.gif" alt="Source: Bone Marrow Transplantation (2003) 32, 459–469. doi:10.1038/sj.bmt.1704163">
  [Image from: Bone Marrow Transplantation (2003) 32, 459–469. doi:10.1038/sj.bmt.1704163]</p>
  
  <p>If you look at the last "items" of this algorithm three, there are several ways to get there. On the right side for example, there is one last "item" called "Dose escalate/consider trials for resistant disease" and there are two ways to get to this item (one is over "inadequate response" the other is over "No cytogenic response").</p>
  
  <p>With the script I'm searching for here, I want the user to be asked wich way to go and to visualize his choosen path on the screen.</p>
  
  <p>I made my first attempts with a simple tabs html structure and just duplicating the last "items". This works fine but is quite redundant. Hope someone comes up with a more suitable solution.</p>