title: Javascript and jQuery to make divs into a tab based content page
body: <p>I recently had a 30 min test for a job application using only Javascript with jQuery.  Didn't have to be styled well or anything.  I created a very basic "30 min" page with Javascript and jQuery which I thought was "ok".. I just wanted to get some feedback if there was a more efficient/better way of doing this?  as it turned out, I didn't get the job.. always learning, and also the job was quite a way from where I live.</p>
  
  <p>Anyway, the original HTML page given was as follows, and after that is my humble attempt to turn the basic HTML into a tab based content page - again within 30 mins.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  &lt;!-- stylesheet, javascript, etc. here --&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;My Page&lt;/h1&gt;
  
  &lt;h2 class="subheading"&gt;The first section&lt;/h2&gt;
  &lt;div class="content"&gt;
      &lt;p&gt;Lorem ipsum...&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;h2 class="subheading"&gt;The second section&lt;/h2&gt;
  &lt;div class="content"&gt;
      &lt;img src="/some_image" alt="Image" title="Image"&gt;&lt;/img&gt;
      &lt;p&gt;Some other text&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;h2 class="subheading"&gt;The third section&lt;/h2&gt;
  &lt;div class="content"&gt;
      And some more text here
  &lt;/div&gt;
  
  
  &lt;div class="footer"&gt;
      This is at the foot of the page
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Ok, so my humble attempt is as follows:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Test JS page&lt;/title&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;style type="text/css"&gt;
          #tabs
          {
              width:457px;
              height:60px;
          }
          #tab1, #tab2, #tab3
          {
              width:150px;
              border:1px solid #ccc;
          }
          #tab1
          {
              float:left;
          }
          #tab3, #tab2
          {
              float:right;
          }
          #tab2_content, #tab3_content
          {
              display:none;
          }
          .clear
          {
              clear:both;
          }
          #content
          {
              height:300px;
          }
  
      &lt;/style&gt;
  
      &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          $('#tab1_link').click(function (e) {
              e.preventDefault();
              clearContent();
              $('#tab1_content').show();
          });
  
          $('#tab2_link').click(function (e) {
              e.preventDefault();
              clearContent();
              $('#tab2_content').show();
          });
  
          $('#tab3_link').click(function (e) {
              e.preventDefault();
              clearContent();
              $('#tab3_content').show();
          });
  
      });
  
      function clearContent() {
          $("div[id*='_content']").each(function() {
              $(this).hide();
          });
      }
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;h1&gt;My Page&lt;/h1&gt;
  
  &lt;div id="tabs"&gt;
      &lt;div id="tab1"&gt;&lt;a id="tab1_link" class="subheading"&gt;The first section&lt;/a&gt;&lt;/div&gt;
      &lt;div id="tab2"&gt;&lt;a id="tab2_link" class="subheading"&gt;The second section&lt;/a&gt;&lt;/div&gt;
      &lt;div id="tab3"&gt;&lt;a id="tab3_link" class="subheading"&gt;The third section&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="clear"&gt;
  &lt;/div&gt;
  
  &lt;div id="content"&gt;
  
      &lt;div id="tab1_content" class="content"&gt;
          &lt;p&gt;Lorem ipsum...&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="tab2_content" class="content"&gt;
          &lt;img src="/some_image" alt="Image" title="Image"&gt;&lt;/img&gt;
          &lt;p&gt;Some other text&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="tab3_content" class="content"&gt;
      And some more text here
      &lt;/div&gt;    
  
  &lt;/div&gt;
  
  &lt;div class="footer"&gt;
  
  This is at the foot of the page
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So as you can see, not pretty for sure.. the stylesheet was inline as is the script, however this was meant to be a test to show if you knew Javascript/jQuery enough to perform the tasks.. I figured it wasn't great, but not too bad either..</p>
  
  <p>I would be grateful for any feedback on other ways to achieve the desired result.. again it doesn't have to be pretty, just functional.. and of course all within 30 mins..</p>
  
  <p>Thanks!</p>