How do I create simple tabs with CSS and jQuery?

Question

I want to create some simple tabs.

I have 3 divs with different content and I have positioned them on top of each other by setting a minus top-margin on the second two divs.

Then I have 3 tabs and I have set up my code so that when you click #tab1 .fadein content1.

Example:

$(document).ready(function() {
  $(".content-kidsclub").hide();
  $("#tab1").click(function() {
    $(".content-kidsclub").fadeTo("slow", 1.0);
  });
});

$(document).ready(function() {
  $(".content-computersuite").hide();
  $("#tab2").click(function() {
    $(".content-computersuite").fadeTo("slow", 1.0);
  });
});

$(document).ready(function() {
  $(".content-education-assistance").hide();
  $("#tab3").click(function() {
    $(".content-education-assistance").fadeTo("slow", 1.0);
  });
});

The first time I click each one it works well. but after that it just stops. And also: If you click tab2 first it is way above due to the minus margin. not sure why.

I feel so close yet so far. I have suspisions its something to do with callbacks.

I am very new to jQuery so this might seem a bit dumb what I am trying to do.

Overall does anyone know a better way to position divs on top of each other then get the tabs to work. Is it something to do with using display:block and all that sort of thing.

You only need one $(document).ready() function. You can do all of your tab stuff in one ready function. — jrummell
– jrummell, Commented Jun 12, 2012 at 17:43

Christopher Marshall · Accepted Answer · 2012-06-12 17:41:19Z

5

Why not use JQuery UI and use the tabs function?

http://jqueryui.com/demos/tabs/

Super easy to set up and get going.

answered Jun 12, 2012 at 17:41

Christopher Marshall

10.7k10 gold badges57 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christopher Marshall Over a year ago

I can provide more detailed help if you're having problems.

Zoltan Toth · Accepted Answer · 2012-06-12 17:59:15Z

3

You were pretty close - http://jsfiddle.net/7mfLF/1/

Note that you don't have to repeat the document.ready part - declare once and good to go.

Sure you can use Bootstrap and jQuery UI, but they're REALLY heavy and for these kind of small tasks it's not really the best practice to include a 130Kb library.

$(document).ready(function(){
    $("li").click(function() {
        $("li div").hide();
        $(this).children("div").fadeIn("slow");
    });
});

edited Jun 12, 2012 at 17:59

answered Jun 12, 2012 at 17:53

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

4 Comments

user1451848 Over a year ago

Sorry but could you be more specific. Do i still need the -margin and what is the li about and the this what do i change to my stuff?

user1451848 Over a year ago

I have done the tabs the way that link said but the problem is they dont look the same in live view as in preview in browser which makes designing the look of the page really hard

Zoltan Toth Over a year ago

$(this) refers to the currently clicked element. And you don't need my CSS - you're free to change it according to your design.

Christopher Marshall Over a year ago

I wouldn't consider JQuery UI to be heavy, especially when you can customize it to your needs and minify. Also if you're using the google CDN it's likely the user may have it cached. I do believe it may have been over the OP's head though and this seems a viable solution.

localhost · Accepted Answer · 2012-06-12 17:44:28Z

1

It looks like you're showing your tabs but never hiding them again?

Ever think of using the twitter bootstrap? Might simplify things...

http://twitter.github.com/bootstrap/javascript.html#tabs

answered Jun 12, 2012 at 17:44

localhost

4402 gold badges7 silver badges24 bronze badges

Comments

steveax · Accepted Answer · 2012-06-13 19:32:51Z

I figured it out finally cheers for helping this is what i wanted.

$(document).ready(function(){ 
    $("#tab1").click(function(){
        $(".content-computersuite").css({display: "none"}).animate({opacity: "0"});
        $(".content-education-assistance").css({display: "none"}).animate({opacity: "0"});                    
        $(".content-kidsclub").css({display: "block"}).animate({opacity: "1"},1000);    
    });

    $("#tab2").click(function(){
        $(".content-kidsclub").css({display: "none"}).animate({opacity: "0"});  
        $(".content-education-assistance").css({display: "none"}).animate({opacity: "0"});
        $(".content-computersuite").css({display: "block"}).animate({opacity: "1"},1000);   
    });

    $("#tab3").click(function(){
        $(".content-kidsclub").css({display: "none"}).animate({opacity: "0"});  
        $(".content-computersuite").css({display: "none"}).animate({opacity: "0"});
        $(".content-education-assistance").css({display: "block"}).animate({opacity: "1"},1000);    
    });
});

Just a simple CSS change from display:none to display:block. then an animate to fade it. cheers for explaining i only have to do the document ready once that was handy.

Marcio Mazzucato · Accepted Answer · 2012-06-13 20:06:59Z

0

I am using this code in my projects:

Simple Tabs w/ CSS & jQuery

It is simple, lightweight because uses pure JQuery (without JQuery UI) and works in all browser that i've tested. Hope can help you.

answered Jun 13, 2012 at 20:06

Marcio Mazzucato

9,36511 gold badges71 silver badges82 bronze badges

Collectives™ on Stack Overflow

How do I create simple tabs with CSS and jQuery?

5 Answers 5

1 Comment

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related