How do I get the tabbed content to change using jQuery?

Question

I am using jQuery to display content in three separate views. However, I can only get the first (default) view to show. Note: this is not using jQuery UI.

Here is a link to the page (still very much in dev).

Here is the html:

<div id="tabbed_area">
            <ul class="tabs">
                <li><a id="services" class="tab active" href="#">Services</a></li>
                <li><a id="supplies" class="tab" href="#">Supplies</a></li>
                <li><a id="diy" class="tab" href="#">DIY</a></li>
            </ul>
            <br class="clearer" />
                <div id="services-content" class="content">
                    <p class="intro">Welcome to <a href="#">Moving Simplified</a>. Features and benefits go here on the home page to drive.</p>
                    <h3>This is the main headline</h3>
                    <h4>Headline Goes Here</h4>
                    <p>Welcome to Moving Simplified. Features and benefits go here on the ome page to drive home the point that you are affordable, professional, knowledgeable, amd make the move real.</p>
                </div>
                <div id="supplies-content" class="content">
                    <p class="intro">Welcome to <a href="#">Moving Simplified</a>. Features and benefits go here on the home page to drive.</p>
                    <h3>This is the main headline</h3>
                    <h4>Headline Goes Here</h4>
                    <p>Welcome to Moving Simplified. Features and benefits go here on the ome page to drive home the point that you are affordable, professional, knowledgeable, amd make the move real.</p>
                </div>
                <div id="diy-content" class="content">
                    <p class="intro">Welcome to <a href="#">Moving Simplified</a>. Features and benefits go here on the home page to drive.</p>
                    <h3>This is the main headline</h3>
                    <h4>Headline Goes Here</h4>
                    <p>Welcome to Moving Simplified. Features and benefits go here on the ome page to drive home the point that you are affordable, professional, knowledgeable, amd make the move real.</p>
                </div>
        </div>

Here is the css:

#mainContent #tabbed_area           { padding: 0 20px; position: relative; z-index: 50; }
ul.tabs                 { margin: 0px; padding: 0px; }
ul.tabs li                  { list-style: none; float: left; display: inline; }
ul.tabs li a#services           { 
                        width: 113px;
                        height: 36px;
                        display: block;
                        text-indent: -9999px;
                        border: none;
                        background: url(../_images/btn_services.png) no-repeat center top; }
ul.tabs li a#supplies               { 
                        width: 113px;
                        height: 36px;
                        display: block;
                        text-indent: -9999px;
                        border: none;
                        background: url(../_images/btn_supplies.png) no-repeat center bottom; }                                 
ul.tabs li a#diy                    { 
                        width: 113px;
                        height: 36px;
                        display: block;
                        text-indent: -9999px;
                        border: none;
                        background: url(../_images/btn_diy.png) no-repeat center bottom; }

 ul.tabs li a#services:hover,
 ul.tabs li a#supplies:hover,
 ul.tabs li a#diy:hover  { background-position: center center; }                                

#supplies-content, #diy-content { display: none; }

And finally here is the jQuery:

<script type="text/javascript">
$(document).ready(function() {
$("a.tab").click(function(){
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(.content).slideUp();

    var content_show = $(this).attr("title");
    $("#"+content_show).slideDown();
    });
});
</script> 

Answer 1

This line:

    $(.content).slideUp();

should be:

    $(".content").slideUp();

And this:

var content_show = $(this).attr("title");

should be:

var content_show = $(this).attr("id");

...since your doesn't have a title attribute, but the ID does seem to give you want you want.

And since the content area has an ID ending with "-content", you need to append that to the ID from content_show.

$("#" + content_show + '-content').slideDown();

Also, I'm guessing that the default behavior of the <a> element is refreshing the page when you click.

You should prevent the default behavior of the <a> when you click using event.preventDefault()

$("a.tab").click(function( evt ) {
    // Prevents the default behavior of the <a> from occurring
    evt.preventDefault();
    $(".active").removeClass("active");
    $(this).addClass("active");
    var content_show = $(this).attr("id");
         // only slide up the visible content
    $(".content:visible").slideUp();
         // you need to append '-content' to the ID to make
         //    match the proper content area
    $("#" + content_show + '-content').slideDown();

});​

• http://api.jquery.com/event.preventDefault/