Last Updated: March 21, 2023
· mborn319

Load Bootstrap tabs dynamically

Need Bootstrap tabs, but with dynamic content? Use this JS to fetch the content before showing the tab. Works for in-content links as well.


//the reason for the odd-looking selector is to listen for the click event
// on links that don't even exist yet - i.e. are loaded from the server.
$('#tabs').on('click','.tablink,#prodTabs a',function (e) {
    var url = $(this).attr("data-url");

    if (typeof url !== "undefined") {
        var pane = $(this), href = this.hash;

        // ajax load from data-url
    } else {

Use a .tablink class on your in-content links to link between tabs. See comment in JS.


<div id="tabs">
    <ul class="nav nav-tabs" id="prodTabs">
        <li class="active"><a href="#tab_basic">Basic</a></li>
        <li><a href="#tab_images" data-url="?action=images">Images</a></li>
        <li><a href="#tab_videos" data-url="?action=videos">Videos</a></li>
    <div class="tab-content">
        <div id="tab_basic" class="tab-pane active"></div>
        <div id="tab_images" class="tab-pane active"></div>
        <div id="tab_videos" class="tab-pane active"></div>

Adapted from:

Related protips:

Change the Bootstrap NavBar Breakpoint

2 Responses
Add your response

Default on page load show tab code...
$('#tab-id').load('url', function (result) {

over 1 year ago ·

Can we have one more level of tab

over 1 year ago ·