News and Tips

Opening a bootstrap tab in the same page outside the tab section

A fairly common request is to open one of bootstraps neat little tabs but using a control outside of the standard tab set-up.

The most frequent example of this, is something like having a [@rating@]tag up top showing the average review rating for a product, but finding the reviews tucked away in a tab further down the product page.

We have written a handy little on-click you can whack onto any <a> tag to do just that!

<a href="#" data-toggle="tab" onClick="$('a[href=#reviews]').tab('show'); $('html,body').animate({scrollTop:$('a[href=#reviews]').offset().top}, 600); return false;"> Link Content </a>

In this sample, we target the #reviews ID. But you can replace the two uses of the value to any other tab ID and it'll work the same. We also include an animate call to make the transition a little smoother so the user doesn't lose their place on the page.