CODEWITHSUNDEEP
jquerycss
user1451848
user1451848

Reputation: 11

How do I create simple tabs with CSS and jQuery?

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.

Upvotes: 1

Views: 1028

Answers (5)

Marcio Mazzucato
Marcio Mazzucato

Reputation: 9285

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.

Upvotes: 0

user1451848
user1451848

Reputation: 11

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.

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

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");
    });
});

Upvotes: 3

localhost
localhost

Reputation: 440

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

Upvotes: 1

Christopher Marshall
Christopher Marshall

Reputation: 10736

Why not use JQuery UI and use the tabs function?

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

Super easy to set up and get going.

Upvotes: 5

Related Questions