title: Show/hide multiple divs using JavaScript
body: <p>I would like to show multiple divs by clicking a respective link, which I believe I have already achieved - however, I would also like to create a link class which hides the div too.</p>
  
  <p>I'm hoping someone can produce an amended version of the following script, so that it programs a link class to hide a div, using targets?</p>
  
  <p>Here is the jsFiddle I'm working with: <a href="http://jsfiddle.net/XwN2L/1163/" rel="nofollow">http://jsfiddle.net/XwN2L/1163/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="buttons"&gt;
          &lt;a  class="show" target="1"&gt;Option 1&lt;/a&gt;
          &lt;a  class="show" target="2"&gt;Option 2&lt;/a&gt;
          &lt;a  class="show" target="3"&gt;Option 3&lt;/a&gt;
          &lt;a  class="show" target="4"&gt;Option 4&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div id="div1" class="targetDiv"&gt;Lorum Ipsum 1&lt;/div&gt;
      &lt;div id="div2" class="targetDiv"&gt;Lorum Ipsum 2&lt;/div&gt;
      &lt;div id="div3" class="targetDiv"&gt;Lorum Ipsum 3&lt;/div&gt;
      &lt;div id="div4" class="targetDiv"&gt;Lorum Ipsum 4&lt;/div&gt;​
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>    $('.targetDiv').hide();
      $('.show').click(function () {
          $('.targetDiv').hide();
          $('#div' + $(this).attr('target')).show();
      });
  </code></pre>
  
  <p>Thank you in advance.</p>
  
  <p>UPDATE:</p>
  
  <p><a href="http://jsfiddle.net/XwN2L/1180/" rel="nofollow">http://jsfiddle.net/XwN2L/1180/</a></p>
  
  <p>This seemed to work, sorry if I wasn't clear enough in the question.</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div class="buttons"&gt;
          &lt;a  class="show" target="1"&gt;Option 1&lt;/a&gt;
          &lt;a  class="show" target="2"&gt;Option 2&lt;/a&gt;
          &lt;a  class="show" target="3"&gt;Option 3&lt;/a&gt;
          &lt;a  class="show" target="4"&gt;Option 4&lt;/a&gt;
          &lt;a  class="hide" target="1"&gt;Close 1&lt;/a&gt;
          &lt;a  class="hide" target="2"&gt;Close 2&lt;/a&gt;
          &lt;a  class="hide" target="3"&gt;Close 3&lt;/a&gt;
          &lt;a  class="hide" target="4"&gt;Close 4&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div id="div1" class="targetDiv"&gt;Lorum Ipsum 1&lt;/div&gt;
      &lt;div id="div2" class="targetDiv"&gt;Lorum Ipsum 2&lt;/div&gt;
      &lt;div id="div3" class="targetDiv"&gt;Lorum Ipsum 3&lt;/div&gt;
      &lt;div id="div4" class="targetDiv"&gt;Lorum Ipsum 4&lt;/div&gt;​
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>    $('.targetDiv').hide();
      $('.show').click(function () {
          $('.targetDiv').hide();
          $('#div' + $(this).attr('target')).show();
      });
  
      $('.hide').click(function () {
          $('#div' + $(this).attr('target')).hide();
      });
  </code></pre>
  
  <p>Thanks once again for all your help!</p>