Changing Javascript tabs with a button?

Question

I'm working on a website that's implementing tabs via javascript, and I'd like to create a button that goes to the 'next' tab. I don't care if I have to hardcode in the tab IDs into the javascript or what, but regardless I'd like to be able to advance the tabs.

EDIT3: Here's a jfiddle implementation of what I have. I just want the next button to be able to advance the tabs similar to clicking on them. Thanks!

http://jsfiddle.net/Cd5qb/

Here's the code I have for the current working tabs, without a button:

var tabContents = $(".tab_content").hide(), 
    tabs = $("ul.tabs li");

tabs.first().addClass("active").show();
tabContents.first().show();

tabs.click(function() {
    var $this = $(this), 
        activeTab = $this.find('a').attr('href');
    if(!$this.hasClass('active')){
        $this.addClass('active').siblings().removeClass('active');
        tabContents.hide().filter(activeTab).fadeIn();
    }
    return false;
});

So I'm trying to implement something similar to the tabs.click for a button, and here's what I've got so far:

var tabbtn = $(".tabbutton");
tabbtn.click(function() {
    var listItem = document.getElementById('tab2');
    var $this = $(this), 
        activeTab = $this.find('a').attr('href');
    tabContents.hide().filter("#tab2").fadeIn();

    return false;
});

This will actually display the right tab's information, but it won't change which tab header is highlighted.

Anyone have any ideas? Thanks in advance for the help!

Can we see your HTML? Or perhaps an example on jsfiddle.net? — Explosion Pills
– Explosion Pills, Commented Feb 1, 2013 at 5:07
Sorry about that! I've added some sample HTML, I hope that helps! — SuperXero
– SuperXero, Commented Feb 1, 2013 at 5:14
Correct, I believe so. var listItem = document.getElementById('tab2'); alert('Index: ' + $('article').index(listItem)); will return 1 for the index correctly — SuperXero
– SuperXero, Commented Feb 1, 2013 at 5:19
I don't see a call to .tabs on any element anywhere. I tried setting up your code in jsfiddle.net but couldn't get it to work — Explosion Pills
– Explosion Pills, Commented Feb 1, 2013 at 5:20

Gustavo Hoirisch · Accepted Answer · 2013-02-01 12:27:23Z

1

How about:

$(".tabbutton").click(function(){
    var nextTab = parseInt($("li.active").attr("id"), 10) + 1;
    if(nextTab === 4){ nextTab = 1; }
    $("#"+nextTab).click();
});

and adding a numerical equivalent id to the li items?

Working fiddle is here: http://jsfiddle.net/gugahoi/Cd5qb/1/

UPDATE:

Ok, here is the new fiddle with only the button changing the tabs.

This is all the js:

var tabContents = $(".tab_content").hide(), 
    tabs = $("ul.tabs li");

tabs.first().addClass("active").show();
tabContents.first().show();

$(".tabbutton").click(function(){
    var nextTab = parseInt($("li.active").attr("id"), 10) + 1;
    if(nextTab === 4){ nextTab = 1; }
    tabs.removeClass("active");
    $("#"+nextTab).addClass("active");
    tabContents.hide();
    $("#tab"+nextTab).fadeIn("slow");
});

And this is the only update needed in the html:

<ul class="tabs clearfix">
    <li id="1"><a href="#">Tab1</a></li>
    <li id="2"><a href="#">Tab2</a></li>
    <li id="3"><a href="#">Tab3</a></li>
</ul>

edited Feb 1, 2013 at 12:27

answered Feb 1, 2013 at 7:43

Gustavo Hoirisch

1,65712 silver badges19 bronze badges

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

2 Comments

SuperXero Over a year ago

Interesting - it works perfectly in the fiddle, but does nothing on my actual site. Although I tried your code word-for-word - perhaps that might be why. Also though... I'd like to remove the ability of the user to click the headers of the tabs. So ideally.. the button is the only thing that navigates through the tabs. It looks like you're calling the click function of the tabs? If you have any ideas, that'd be great! Thanks for your help!

Gustavo Hoirisch Over a year ago

Updated with your new requests.

Raunak · Accepted Answer · 2013-02-02 07:39:21Z

0

@ Gustavo Hoirisch: With your previous code I too did removed 'active' from 'tabContents' and was about to post. Anywayz grt job.

answered Feb 2, 2013 at 7:39

Raunak

171 silver badge7 bronze badges

Collectives™ on Stack Overflow

Changing Javascript tabs with a button?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related