CODEWITHSUNDEEP
jquerytabs
G.L.P
G.L.P

Reputation: 7217

Easy responsive tabs custom tab activate

I'm using Easy Responsive tab LINK.. Here 1st tab is active on page load.. but i want to change my active tab to something else other than 1st tab.. I have following code:

HTML:

<div id="demoTab">          
        <ul class="resp-tabs-list">
            <li> .... </li>
            <li> .... </li>
            <li> .... </li>
        </ul> 

        <div class="resp-tabs-container">                                                        
            <div> ....... </div>
            <div> ....... </div>
            <div> ....... </div>
        </div>
    </div>

Here is my demo page. i want to change the order of activated to 2nd tab. Is it posiible?

Upvotes: 2

Views: 20332

Answers (6)

Kamal Rajpurohit
Kamal Rajpurohit

Reputation: 11

Html Code

<ul class="resp-tabs-list">
 <li><a href="#tab1">Responsive Tab-1</a></li>
 <li><a href="#tab2">Responsive Tab-2</a></li>
 <li><a href="#tab3">Responsive Tab-3</a></li>
</ul>

Scripts Code

$(document).ready(function () {  
   var slug = '#tab2'; 
   setTimeout( "$('"+slug+"').trigger('click');",50 );
});

Upvotes: 1

Vimal
Vimal

Reputation: 11

$("ul.resp-tabs-list > li").removeClass("resp-tab-active");     
$("div.resp-tabs-container > h2").removeClass("resp-tab-active");     
$("div.resp-tabs-container > div").removeClass("resp-tab-content-active");    
$("div.resp-tabs-container > div").hide();
$('ul.resp-tabs-list > li[aria-controls="tab_item-2"]').addClass("resp-tab-active");     
$('div.resp-tabs-container > h2[aria-controls="tab_item-2"]').addClass("resp-tab-active");     
$('div.resp-tabs-container > div[aria-labelledby="tab_item-2"]').addClass("resp-tab-content-active");    
$('div.resp-tabs-container > div[aria-labelledby="tab_item-2"]').show();

Upvotes: 0

Mario
Mario

Reputation: 425

Easy Responsive Tabs plugin has a parameter for that in the source code generated by the "tabs shortcode" feature. In the following code, just move the "active" flag from the first tab to the desired tab:

[restabs ....]
[restab title="TAB 1" active="active"]Content of tab 1[/restab]
[restab title="TAB 2"]Content of tab 2[/restab]
[restab title="TAB 3"]Content of tab 3[/restab]
[restab title="TAB 4"]Content of tab 4[/restab]
[/restabs]

I know this thread is old, but my answer may help someone.

Upvotes: 1

Sadique Poolwala
Sadique Poolwala

Reputation: 31

place below function after initializing of your responsive tab.

setTimeout( "$('ul.resp-tabs-list li:nth-child(2)').trigger('click');",200 );

you can also use this simple tab script rather than using junk scripts.

see here: http://simple-jquery-responsive-tab.blogspot.in/

Upvotes: 1

Sid
Sid

Reputation: 801

You can do it dynamically like this

<ul class="resp-tabs-list">
  <li><a href="#tab1">Responsive Tab-1</a></li>
  <li><a href="#tab2">Responsive Tab-2</a></li>
  <li><a href="#tab3">Responsive Tab-3</a></li>
</ul>

Then we need to get the hash from the url and apply the correct class:

JavaScript

var hash = '#tab1',
    lis = $("ul.resp-tabs-list > li");
lis.removeClass("resp-tab-active");
$("a[href='" + hash + "']").addClass("resp-tab-active");

Js Demo: http://jsfiddle.net/HZ3F4/5/

Upvotes: 2

Fabricator
Fabricator

Reputation: 12772

Probably not the correct way of doing this. I just send a click to that tab.

$('h2[aria-controls="tab_item-1"]').click();

demo: http://jsfiddle.net/HZ3F4/2/

Upvotes: 5

Related Questions