bootstrap 3 tabs example

All posts tagged bootstrap 3 tabs example

Bootstrap comes with a lot of different JavaScript tools to make your website more user friendly.  Today I’m going to cover Tabs and then give a more advanced example for making your tabs have dynamic content using AJAX.  We all know what tabs look like and in a website they can be very useful to group similar content without having to create a new page for each chunk of data.  Below is an example of the basic Bootstrap tabs.

You’ll notice that there are two sections to the tabs. The first is the nav-bar ul. This is where you give each tab a title. You can even do drop downs here because they are normal Bootstrap nav items.  That’s all there is to the basic Bootstrap tabs.  They work wonders and you can see the live demo on their site here.

To make each tab load in data via AJAX you’ll need to tap into Bootstrap’s triggers.  Here’s what I did using the same example as above and the JQuery below.

The trigger is fired when the tab is changed and the e.target is the event target, or in our case the newly activated tab.  Since the tab’s href points to the id of the element we want to change data we can use that to point our data to when it comes.  I’ve added a check to make sure we are only making the AJAX call if that tab is empty to help on load times of large data sets but you can remove that if you’d like.

That’s all there is to it.  Nothing too difficult but useful when you need tabs and need to change that data without reloading the page.  Let me know how you are using tabs below in the comments.