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
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
JS code
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
Html tab code