title: data-toggle="tab" and data-toggle ="collapse" is not working
body: <p>I am trying to display the content of the selected side navigation item, but somehow my data-toggle ="tab" is not working. I have searched it on several forums, made changes accordingly but still could not get it to work. As was suggested, I included the jquery link before the bootstrap link and I am using Bootstrap v3.3.7 (<a href="http://getbootstrap.com" rel="nofollow noreferrer">http://getbootstrap.com</a>).</p>
  
  <p>script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"</p>
  
  <p>The part of the code is as follows:</p>
  
  <pre><code>&lt;script&gt;
     $(document).ready(function () {
  
          $('#sidebarCollapse').on('click', function () {
              $('#sidebar').toggleClass('active');
          });
      });
  &lt;/script&gt;
  
  &lt;div class="container"&gt;
  &lt;div class="row"&gt;
  &lt;div class="wrapper"&gt;
  &lt;nav id="sidebar"&gt;
  &lt;div class="sidebar-header"&gt;
  
  &lt;li&gt;&lt;a href="#eventSubmenu" class="dropdown-toggle" data-toggle ="collapse" aria-expanded="false"&gt;Events&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;ul class="collapse list-unstyled" id="eventSubmenu"&gt;
           &lt;li &gt;&lt;a href="#link1"  role= "tab" data-toggle="tab"&gt; Link1 &lt;/a&gt;&lt;/li&gt;
           &lt;li &gt;&lt;a href="#link2" role= "tab" data-toggle ="tab"&gt; Link2 &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/li&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/MeLNT.png" rel="nofollow noreferrer">As you can see in the image the data-toggle does not change its color, in short it is not considered as a keyword</a></p>