title: Bootstrap 4 - nested navigation link opens tab content only the first time
body: <p>I'm trying to create a vertical nested navigation which opens a tab when it is clicked. However, the link in the nested level causes the tab opens to start misbehaving.</p>
  
  <p>I've a JS fiddle here that illustrates the problem:</p>
  
  <p><a href="https://jsfiddle.net/2v2qwnkc/1/" rel="nofollow noreferrer">https://jsfiddle.net/2v2qwnkc/1/</a></p>
  
  <p>To reproduce:</p>
  
  <ol>
  <li>Click on <code>Reports &gt; Phone</code>. This would load "Phone Content" into the tab content area as expected.</li>
  <li>Now, click on <code>Home</code>. Nothing would happen.</li>
  <li>Next, click on <code>Profile</code>. Profile content would load.</li>
  <li>Finally, click on <code>Phone</code> again. Nothing would happen.</li>
  </ol>
  
  <p>Any help is greatly appreciated.</p>