jQuery tabs using radio buttons instead of list navigation
- by caleb
I'm following a tutorial to create a simple jquery tabs show/hide content.
Wondering if there's a way to re-engineer it to use a list of radio buttons instead of a list?
Tutorial here:
http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/
My js:
$(".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;
});
My HTML:
<ul class="tabs">
<li><input type="radio" name="card" id="one" value="gallery" /> <label for="one">gallery</label></li>
<li><input type="radio" name="card" id="two" value="submit" /> <label for="two">submit</label></li>
<li><input type="radio" name="card" id="three" value="resources" /> <label for="three">resources</label></li>
<li><input type="radio" name="card" id="four" value="contact" /> <label for="four">contact</label></li>
</ul>
<div class="tab_container">
<div id="gallery" class="tab_content">
<h2>Gallery</h2>
</div>
<div id="submit" class="tab_content">
<h2>Submit</h2>
</div>
<div id="resources" class="tab_content">
<h2>Resources</h2>
</div>
<div id="contact" class="tab_content">
<h2>Contact</h2>
</div>
</div>
I'm able to actively select the radio button within the list, but not activate the actual div.
