[SalesForce] how to dynamically change the tabs using javascript function

In visualforce having two tabs(tab1 and tab2),i need to show defaulty tab1.when call tab2 need to hide tab1 and show tab2.
i am using anchor tag

<a href="#tab2"> 


<div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab1" data-toggle="tab"> Page1</a></li>
                           <li class="active"><a href="#tab2" data-toggle="tab"> Page2</a></li>
                        </ul>

 <div class="tab-content" id="tabs">
                            <div class="tab-pane active" id="tab-1">
                                <div class="panel-body">

My content

    </div>
        </div>

 <div class="tab-pane" id="tab-2">

 <button id="thisid" data-dismiss="modal" class="close" type="button" ><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

Mycontent

  </div>

defaultly i need to show tab 1 ,when button clicks need to show tab2 and hide tab1.How?

Best Answer

Update - Please see the updated section

You can do $('.nav-tabs li:nth-child(2) a').tab('show'); to show the second tab and $('.nav-tabs li:first-child a').hide(); to hide the first tab in the click event of the button as below.

I have created this Bootply link http://www.bootply.com/gYYO3suQiF to test the functionality. Click on "User Details" link in the first tab, it will show the second tab (User Details) and hide the first tab (search). Hope this helps.

Html tab code

<ul class="nav nav-tabs">
    <li class="active"><a href="#search" data-toggle="tab">Search</a></li>
    <li><a href="#home" data-toggle="tab">User Details</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane active" id="search">
      ...Content 1...
      <a id="tab2button">User Details</a>
    </div>
    <div class="tab-pane" id="home">...Content 2...</div>
</div>

JS code

$(document).ready(function(){
  $('.nav-tabs li:eq(0) a').tab('show');

  $('#tab2button').on('click', function() {
    $('.nav-tabs li:nth-child(2) a').tab('show');
    $('.nav-tabs li:first-child a').hide();
  });  
});

Updated solution

You can do this easily by hiding the second tab on page load. Also you can write the functionality for cancel button as below to return to first tab. You can test the code here http://www.bootply.com/yKOjR4YQJY

JS code

$(document).ready(function(){
  $('.nav-tabs li:nth-child(2) a').hide();

  $('#tab2button').on('click', function() {
    $('.nav-tabs li:nth-child(2) a').show();
    $('.nav-tabs li:nth-child(2) a').tab('show');
    $('.nav-tabs li:nth-child(1) a').hide();
    $('.nav-tabs li:nth-child(1) a').tab('hide');
  }); 

  $('#cancelbutton').on('click', function() {
    $('.nav-tabs li:nth-child(1) a').show();
    $('.nav-tabs li:nth-child(1) a').tab('show');
    $('.nav-tabs li:nth-child(2) a').hide();
    $('.nav-tabs li:nth-child(2) a').tab('hide');

  });  
});

Html tab code

<ul class="nav nav-tabs">
    <li class="active"><a href="#search" data-toggle="tab">Search</a></li>
    <li><a href="#home" data-toggle="tab">User Details</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane active" id="search">
      ...Content 1...
      <a id="tab2button">User Details</a>
    </div>
    <div class="tab-pane" id="home">
      ...Content 2...
      <a id="cancelbutton">Cancel</a>
    </div>
</div>
Related Topic