title: JQuery show hide multiple DIVs from menu and menu within DIV
body: <p>I'm new to JQuery. I'm trying to show and hide multiple divs. I have a menu showing A,B,C. When I click A, the div A1 appears. Div A1 has a menu within it showing 1, 2, 3 and so on. When I click 2 in this menu, A1 disappears and A2 appears. When I click B, the currently visible div disappears and B1 appears. B1 has a menu showing 1, 2, 3. When you click 2, B1 is replaced by B2. And so on - I think you get the picture.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div class="thework"&gt;&lt;a href="#" class="A"&gt;A&lt;/a&gt; &lt;a href="#" class="B"&gt;B&lt;/a&gt; &lt;a href="#" class="C"&gt;C&lt;/a&gt;&lt;/div&gt;
  &lt;div class="work-A-link1"&gt;A1&lt;br /&gt;
  &lt;a href="#" class="link1"&gt;1&lt;/a&gt; &lt;a href="#" class="link2"&gt;2&lt;/a&gt; &lt;a href="#" class="link3"&gt;3&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="work-A-link2"&gt;A2&lt;br /&gt;
  &lt;a href="#" class="link1"&gt;1&lt;/a&gt; &lt;a href="#" class="link2"&gt;2&lt;/a&gt; &lt;a href="#" class="link3"&gt;3&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="work-A-link3"&gt;A3&lt;br /&gt;
  &lt;a href="#" class="link1"&gt;1&lt;/a&gt; &lt;a href="#" class="link2"&gt;2&lt;/a&gt; &lt;a href="#" class="link3"&gt;3&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="work-B-link1"&gt;B1&lt;br /&gt;
  &lt;a href="#" class="link1"&gt;1&lt;/a&gt; &lt;a href="#" class="link2"&gt;2&lt;/a&gt; &lt;a href="#" class="link3"&gt;3&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="work-B-link2"&gt;B2&lt;br /&gt;
  &lt;a href="#" class="link1"&gt;1&lt;/a&gt; &lt;a href="#" class="link2"&gt;2&lt;/a&gt; &lt;a href="#" class="link3"&gt;3&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="work-B-link3"&gt;B3&lt;br /&gt;
  &lt;a href="#" class="link1"&gt;1&lt;/a&gt; &lt;a href="#" class="link2"&gt;2&lt;/a&gt; &lt;a href="#" class="link3"&gt;3&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="work-C-link1"&gt;C1&lt;br /&gt;
  &lt;a href="#" class="link1"&gt;1&lt;/a&gt; &lt;a href="#" class="link2"&gt;2&lt;/a&gt; &lt;a href="#" class="link3"&gt;3&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="work-C-link2"&gt;C2&lt;br /&gt;
  &lt;a href="#" class="link1"&gt;1&lt;/a&gt; &lt;a href="#" class="link2"&gt;2&lt;/a&gt; &lt;a href="#" class="link3"&gt;3&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="work-C-link3"&gt;C3&lt;br /&gt;
  &lt;a href="#" class="link1"&gt;1&lt;/a&gt; &lt;a href="#" class="link2"&gt;2&lt;/a&gt; &lt;a href="#" class="link3"&gt;3&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's the code to go with it:</p>
  
  <pre><code>$(document).ready(function() {
  $('div[class^=work-]').hide();
  $(".A").click(function() {
      $("div[class^=work-]").hide();
      $("div[class^=work-A-link1]").fadeIn();
  });
  $(".B").click(function() {
      $("div[class^=work-]").hide();
      $("div[class^=work-B-link1]").fadeIn();
  });
  $(".C").click(function() {
      $("div[class^=work-]").hide();
      $("div[class^=work-C-link1]").fadeIn();
  });
  $('[class^=link]').click(function() {
      $('div[class^=work-]').hide();
      var $this = $(this);
      var x = $this.attr("className");
      $(".work-A-" + x).fadeIn();
      return false;
  });
  });
  </code></pre>
  
  <p>This code only works with the div "A", and I'd have to number each div individually, which seems really inefficient. I've tried using split() to gather up the class names and target the respective divs, but I don't have the coding skills. Is there an elegant solution to this?</p>