title: Change the active bootstrap tab on button click
body: <p>I want to change the active bootstrap tab on the click of another button.</p>
  
  <p>I have tried add id's to the tabs li and write custom jquery code.</p>
  
  <pre><code>$('#emailNotify').click(function () {
      $('#notify').addClass('active').attr('aria-expanded','true');
      $('#myacc').removeClass('active').attr('aria-expanded','false');
  });
  </code></pre>
  
  <p>This code works fine on first click but it doesn't change back when I tried to click My Account tab again.</p>
  
  <p><a href="https://i.stack.imgur.com/s90yN.jpg"><img src="https://i.stack.imgur.com/s90yN.jpg" alt="Image of Tabs and Button"></a></p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;ul class="content-list museo_sans500"&gt;
  &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Change Password&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a id="emailNotify" data-toggle="tab"&gt;Change Email Notifications&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="javascript:void(0)"&gt;Change Profile Picture&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>