Question

I am using Twitter Bootstrap, and had successfully implemented the tabs. I have a button that should display on all the tabs except for one, any idea how should I do that?

<div class="span6 offset1"> 
  <div class="tabbable">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#general" data-toggle="tab">General</a></li>
      <li><a href="#example2" data-toggle="tab">Example2</a></li>
      <li><a href="#example3" data-toggle="tab">Example3</a></li>
    </ul>

    <div class="tab-content">
      <div id="general" class="tab-pane fade in active" >
       //content
      </div>
      <div id="example2" class="tab-pane fade" >
       //content
      </div>
      <div id="example3" class="tab-pane fade" >
       //content
      </div>
    </div>
 </div> 
 <input type="submit" style="width:120px" class='btn btn-primary' id="update" value="Update"/> 
</div>

How do I program it such that when tab example3 is shown, the update button will be hidden, but still remains on page when tab general and example2 is shown.

Thanks!

Answer 1

I am not sure that is there any event being fired in bootstrap tabs. But the simplest way can be to use mouseclick event on example3 link or even you can try to trigger custom event.

$('a[href="#example3"]').on('click',function(){
 $("#update").hide();
});