title: javascript function show / hide multiple divs with first div visible
body: <p>Im trying to make the first target div always be visible when the page loads whilst the others become visible as the user selects the option. Currently they are all hidden as the page is loaded and only become visible once the buttons are clicked.</p>
  
  <h1>JS</h1>
  
  <pre><code> $('.targetDiv').hide();
   $('.show').click(function () {
   $('.targetDiv').hide();
   $('#div' + $(this).attr('target')).show();
   });
  </code></pre>
  
  <h1>HTML</h1>
  
  <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>