jQuery tabs using radio buttons instead of list navigation

Question

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.

Answer 1

Where you have this line

var activeTab = $(this).find("value").attr("href");

You would probably change it to

var activeTab = "#" + $(this).attr("value");

and then change, for example

<div id="tab2" class="tab_content">

to

<div id="gallery" class="tab_content">

Assuming the value of the radio button is "gallery"

The point of all this being that you are selecting from an attribute on the radio button that is selected what the id of the corresponding div would be. You can adjust the particular string and attributes as needed.

Answer 2

While googling, find this interesting topic. After try, I have a solution. Use click() to active the radio is slow. There is a better way.Use "val()" to get value of radio, instead of "attr('value')". Full code below, tested.

$(document).ready(function() {

//Default Action
$(".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]").attr("checked","checked");
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = "#" + $(this).children("input").val(); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active ID content
    return false;
});

});

Answer 3

i just followed this tut and could not get it working for hours so i made a workaround for others that might see this too.

<li><a href="#fragment-7"><span><input type="radio" checked="yes" name="b" id="5">
                <img onclick="this.parentNode.childNodes[0].checked=true" 
                src="http://www.jgiesen.de/javascript/JavaScript/JSBeispiele/gifs/upArrow.gif" style="margin-left:-20px"></span></a></li>

the trick lies herein

onclick="this.parentNode.childNodes[0].checked=true"

it goes back and than selects the first element which is in jquery style for any tab correct.

with setting margin-left:-20px you get the pic behind the actual radio button. so make your background image either complete transparent or save some 25 px on the left which are transparent.

then just place a image with the correct size or using the img attributes width/height

this workarround does not require to mess with jquery-code, its plain simple

( Another alternative : use this "older" jquery tabs - the radio will be selected and the tab also: http://stilbuero.de/jquery/tabs/#fragment-7 )