CODEWITHSUNDEEP
wordpresstwitter-bootstraptabsbootstrap-tabs
dvent
dvent

Reputation: 105

Link to Specific Bootstrap Tab From Another Page Wordpress

I'm using bootstrap tab shortcodes on my Wordpress site. I want to link from another page to tab2. Can anyone advise how this is done?

My page code (chopped a bit):

[bootstrap_tab name="TAB1" link="tab1-slug" active="active"]
TAB 1 Content
[/bootstrap_tab]
[bootstrap_tab name="TAB2" link="tab2-slug"]
More content
[/bootstrap_tab]
[bootstrap_tab name="TAB3" link="tab3-slug"]
Yep. Even more content.
[/bootstrap_tab]
[bootstrap_tab name="TAB4" link="tab4-slug"]
Yep. Even more content.
[/bootstrap_tab]
[end_bootstrap_tab]

The code it produces:

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="tabs active">
        <a data-toggle="tab" href="#tab1-slug">TAB1</a>
    </li>
    <li class="tabs ">
        <a data-toggle="tab" href="#tab2-slug">TAB2</a>
    </li>
    <li class="tabs ">
        <a data-toggle="tab" href="#tab3-slug">TAB3</a>
    </li>
    <li class="tabs ">
        <a data-toggle="tab" href="#tab4-slug">TAB4</a>
    </li>
</ul>
<div id="my-tab-content" class="tab-content">
    <div id="tab1-slug" class="tab-pane active">
        <p></p>
        <h2>header</h2>
        <p><strong>bold</strong></p>
        <p>content</p> 
        <p></p>
    </div>
    <div id="tab2-slug" class="tab-pane ">
        <p></p>
        <h2>TAB2</h2>
        <p><strong>These are usually two day</strong></p>
    </div>
    <div id="tab3-slug" class="tab-pane ">
        <p></p>
        <h2>TAB3</h2>
        <p>1 to 2 day events</p><p></p>
    </div>
    <div id="tab4-slug" class="tab-pane ">
        <p>
            <h2>TAB4</h2>
            <p><strong>5 to 10 day courses</strong></p>
    </div>
</div>

Upvotes: 2

Views: 4636

Answers (2)

Adam
Adam

Reputation: 26

Though not in WordPress, this seems to be the definitive solution to linking to Bootstrap tabs: Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

That being said, I wrote a WordPress plugin that will do this. Activate the plugin, then you'll be able to use the tab's href as the hash.

If your tab looks like this:

<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>

You can link to it and activate/open it using a link like this:

<a href="/page-with-my-tab/#profile">Link to my tab</a>

The plugin will also allow you to link directly to content on the tabs, using a sort of a two-step link: Step 1 Activate the proper tab Step 2 Scroll to the content on the tab.

It does this using only a single hash in the URL. For example: http://www.example.com/mypage/#content

This will take you to "mypage" and the HTML element with id="content", whether it's on an active/inactive Bootstrap tab or just on the page somewhere.

Hope this helps:

Here's the plugin on GitHub: https://github.com/marinersmuseum/WP-Tab-Anchors/blob/master/wp-tab-anchors.zip

Upvotes: 1

brasofilo
brasofilo

Reputation: 26065

Supposing that jQuery is being loaded and that the link URL is something like 

http://example.com/page-with-tabs/?tab=NUMBER

We print some conditional script at the footer:

add_action( 'wp_footer', 'active_tab_so_19576232' );

function active_tab_so_19576232()
{
    # Query var not set in URL, bail out
    if( !isset( $_GET['tab'] ) )
        return;

    # Change the active tab
    $tab = '#tab'. $_GET['tab'] .'-slug';   
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('div.tab-pane.active').removeClass('active');
        $('<?php echo $tab; ?>').addClass('active');
    });
    </script>
    <?php
}

Should be a plugin, but you can drop the code in your theme functions.php.

Upvotes: 1

Related Questions