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.