calebo calebo - 26 days ago 6
jQuery Question

jQuery tabs using radio buttons instead of list navigation

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

Here is the solution:

<div id="tabs">

<ul class="tabs">

     <li id="tab-1"><label for="tab1">For Sale<input name="tab" type="radio" value="forsale" /></label></li>
     <li id="tab-2"><label for="tab2">Wanted<input name="tab" type="radio" value="wanted" /></label></li>
</ul>

 <div class="tab_container">     

      <div id="forsale" class="tab_content">for sale</div>

      <div id="wanted" class="tab_content">wanted</div>

</div>

jQuery(document).ready(function($) {

                //Default Action
                $(".tab_content").hide(); //Hide all content
                $("ul.tabs li:first").addClass("active").show().find("label input:radio").attr("checked",""); //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"); //Add "active" class to selected tab
                    //$(".tab_content").hide(); //Hide all tab content
                    //var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
                    //$(activeTab).fadeIn(); //Fade in the active content
                    //return false;
                    $("ul.tabs li").removeClass("active"); //Remove any "active" class
                    $("ul.tabs li").find("label input:radio").attr("checked","");
                    $(this).addClass("active").find("label input:radio").attr("checked","checked");
                    $(".tab_content").hide(); //Hide all tab content
                    var activeTab = $(this).find("label input:radio").val(); //Find the href attribute value to identify the active tab + content
                    $('#' + activeTab).fadeIn(); //Fade in the active ID content
                    return false;

                });

            });