Easy responsive tabs custom tab activate

Question

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?

Answer 1

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/

Answer 2

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/