title: jQuery tabs using radio buttons instead of list navigation
body: <p>I'm following a tutorial to create a simple jquery tabs show/hide content.</p>
  
  <p>Wondering if there's a way to re-engineer it to use a list of radio buttons instead of a list?</p>
  
  <p>Tutorial here:
  <a href="http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/" rel="nofollow noreferrer">http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/</a></p>
  
  <p>My js:</p>
  
  <pre><code>    $(".tab_content").hide(); //Hide all content
  $("ul.tabs li:first").addClass("active").show(); //Activate first tab
  $(".tab_content:first").show(); //Show first tab content
  
  //On Click Event
  $("ul.tabs li").click(function() {
      $("ul.tabs li").removeClass("active"); //Remove any "active" class
      $(this).addClass("active").children("input[@type=radio]").click(); //Add "active" class to selected tab
      $(".tab_content").hide(); //Hide all tab content
      var activeTab = "#" + $(this).children("input").attr("value"); //Find the href attribute value to identify the active tab + content
      $(activeTab).fadeIn(); //Fade in the active ID content
      return false;
  });
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>    &lt;ul class="tabs"&gt;
      &lt;li&gt;&lt;input type="radio" name="card" id="one" value="gallery" /&gt; &lt;label for="one"&gt;gallery&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;input type="radio" name="card" id="two" value="submit" /&gt; &lt;label for="two"&gt;submit&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;input type="radio" name="card" id="three" value="resources" /&gt; &lt;label for="three"&gt;resources&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;input type="radio" name="card" id="four" value="contact" /&gt; &lt;label for="four"&gt;contact&lt;/label&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tab_container"&gt;
      &lt;div id="gallery" class="tab_content"&gt;
          &lt;h2&gt;Gallery&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div id="submit" class="tab_content"&gt;
          &lt;h2&gt;Submit&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div id="resources" class="tab_content"&gt;
          &lt;h2&gt;Resources&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div id="contact" class="tab_content"&gt;
          &lt;h2&gt;Contact&lt;/h2&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm able to actively select the radio button within the list, but not activate the actual div.</p>