openam / bootstrap-responsive-tabs

Bootstrap responsive tabs are tabs that switch to collapsible components (accordions) when resized.

Bootstrap Responsive Tabs

This uses standard Bootstrap 3.0.0 css and js for the tabs and collapse accordion items. They are regular tabs at some screen sizes and collapsible components based on the Bootstrap Responsive Utilities, which can be defined by editing one attribute in the javascript file.

Demo and Documentation

To view the demo and documentation visit http://openam.github.io/bootstrap-responsive-tabs/

Key features

• Uses standard bootstrap tab markup.
• Collapsible component (accordion) is created with jquery.
• Tabs and accordions are accessible via keyboard.
• Supports multiple tab groups on a page, with or without each being responsive.

bootstrap-responsive-tabs's Issues

Copy li classes to outermost generated div

In reference to your previous comment I've opened a new issue for this.

Would it be possible to pull over the classes from the tab <li> to the outermost <div> of the generated accordions. So that code like jQuery(".example_li").addClass("hidden"); will continue to function across both the tabs and accordion.

Issue when using Bootstrap fade class

Cool solution to a common problem. Thanks for putting it out here.

I ran into an issue utilizing the fade class with tabs that I thought I’d report.

Using your example code I can reproduce the issue.

• Add the "fade" class to divs with tab-pane.
• On initial load of the page when in panel mode, click “Key Features” or “Source” panel.

“How To” will stay open in addition to the other panel opening. It works correctly with subsequent collapses on any panel. I've tested with Bootstrap 3.2.0 and the problem still exists.

Removing fade from my tab-panes everything works as expected. I’m not exactly sure of the root cause, something to do with the transition and timing probably, but it may be worth documenting unless a solution is found.

Here is a jsfiddle that demos the issue with the same setup as your example page.
http://jsfiddle.net/r429t/

Error on resizing window

when i resize the window to sm or xs it appears the on console "Cannot read property 'replace' of undefined on line responsive-tabs.js 112". i am using bootstrap 3 and following the same rules for this plugin you provided. Thnx in advance

Nothing is showing below 767px

I'm using this plugin and it's working. but nothing is visible below 767px. I'm using Bootstrap 3. and below is the part which keep the panel hidden

.visible-sm, tr.visible-sm, th.visible-sm, td.visible-sm {
display: none !important;
}
toolkitmedia="all"
.visible-xs, tr.visible-xs, th.visible-xs, td.visible-xs {
display: none !important;
}

Multiple tab groups on same page - Bug fixed (probably)

Hi and thank you for this script.

In my page I have set two different tab groups and I noticed that the "active" tab was not converted to active panel properly.
I tried to study the code and the fix I applied was to move this part

if ( activeTab ) {
$( activeTab ).collapse( 'show' );
}

inside:

$.each( tabGroups, function () {...}

I don't know it it's the best way to solve this issue but it did.
Hope that it will be helpful for others.

Doesn't work with tabs inside a panel

This doesn't work if the tabs are placed inside a bootstrap panel.

Re-initialize responsive tabs

I'm trying to use responsive tabs in conjunction with JQuery UI Sortable to rearrange the tabs. I run into a problem with being unable to reinitialize the responsive tabs after a tab has been moved. Testing I have run into 2 scenarios. First, I only do the initial responsive tabs call and sorting works in a full desktop view but when moving to sm, xs the order reverts to the original order until brought back to full view. Second, if I try to initialize responsive tabs again after the sort, two sets of accordions display - one with the correct order and one with the original (because it creates a second instead of re-initializing the first).

Is there a way to refresh or re-initialize so it can pick up the new tab order? Here is a fiddle with my test case. Comments (lines 230, 237) towards the end of the js show where to change to get both of my test cases. http://jsfiddle.net/dcgj8att/

nested tabs/ Collapse/ Accordions

It would seem that any nested accordion, tabs, or collapses within the set of responsive tabs is being cancelled out when responsive tabs kicks in.

Please add support for bower

Error on first Tab

I have 4 tabs. When toggling on 2nd to 4th tab, other tabs are collapsing, but when I toggle on the 1st tab while either of the 2nd, 3rd or 4th tab are open, the other is not closing.

add a span-tag

hi,

i'd like to have the whole panel-tiltle clickable. therefor i added the css mentioned in #5.

is there a way to add a span-tag behind the h4-tag in order to show up a glyphicon - something like

< span class="pull-right collapse-handle glyphicon glyphicon-chevron-down" >< /span > and
< span class="pull-right collapse-handle glyphicon glyphicon-chevron-up" >< /span >

depending on the accordion-state?

thank you for your help

Add bower support

Just open the terminal and type bower init and then list your package.

How to keep all tab inactive (closed) in mobile view?

Embedded Twitter Feed Disappears on resize

It appears that embedding a twitter feed inside the tab content area breaks on resize. Any ideas on a resolution?
Here is a jsfiddle:
http://jsfiddle.net/1c367qth/1/
In this fiddle, the twitter feed doesn't show up at all within the accordion. In my local testing it appears only on page load. Resizing breaks it.

Prevent other panels from collapsing

How might one alter this (superb) plugin to have open panels left open when opening another panel?

Generally one would either remove the "data-parent" attribute, or add a "data-target" attribute. I have tried both, but with no success.

Thank you.

Panel content disappear

Hi,

I'm using your responsive Tabs and having some trouble. In fact, i test the functionnaly by resize my browser and everything work great when i go from lg screen to xs or sm screen but when i come back, the content of my tabs on lg disappear..
There is no more things inside..

Do you know how I can fix it or if something already happen?

Thanks!

To set the default tab from url ( url with #id of elemnt)

To set the default tab from url ( url with #id of element) use this in you code

if (window.location.hash !== '') {
var hasHash = window.location.hash;
$('a[href="'+ hasHash +'"]').click();
}

Problem when resizing a normal screen

Hi,

I get a problem with tab-content when re-sizing a normal PC screen. When from large going to small everything is fine. When I re-size the browser back to its normal size all tab content disappears. I can see only tabs but no content. Am I missing something?

thanks in advance

Fade effect lost

Refer from http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tab_show&stacked=h
In the <div class="tab-content">, if I add "fade in" class to the first tab content, add "fade" class to second and so on tabs to gain the "fading" effect when switching tabs. Like this:

`

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Menu 1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

`

It works on large size of browser, but if I resize the browser to smaller screen, then toggle some tabs in the responsive interface, then resize the screen back to large size, at this time, the "fading" effect is lost.

Maintain active state from tab li a to panel-heading

When I change screen from lg to sm, the tab panel remains open as expected but I can't seem to figure out how to communicate the "active" state of the tab "li a" to the panel heading div so I can apply a style.

Google Map issues

Hi,

I think I have found a bug with the implementation, when you have a google map inside your tab (or tabs), after the content is toggled (after appropriate resize), the google map(s) gets fairly broken.

In short things like the marker(s) disappear and calling google.maps.event.trigger(map, 'resize') doesn't have the desired effect (of resizing within the container element).

My guess is that it is caused by handlers getting orphaned. My first thought was to try to destroy the map(s) instances and recreate, however there is no good way to destroy existing v3 google maps e.g. if you set the map to null and remove markers via marker.setMap(null) you end up with javascript errors being thrown on scroll/resize events.

After a few hours of playing with this I gave up and reverted to bootstrap tabs only and just applied styling to the tabs after "sm" breakpoint, but I thought you might like to know.

Cheers

Leave each tab open until clicked again

Is it possible to leave each tab open when another one is clicked so that they just individually toggle and aren't connected to each other? The problem is that when one tab is open and another tab is clicked, the collapsing tab above causes the page content to jump significantly so the user doesn't know where they were on the page.

Error resizing - when tab contains a panel with body

If inside of div with class="tab-content" we have a panel with his body (class="panel-body"), when we try to resize, it happens 2 things:

1. This error is coming up:
   TypeError: $(...).attr(...) is undefined
   var destinationId = $( tabContent ).attr( 'id' ).replace ( /^/, '#collapse-' );
2. It ruins the content of the panel

Please check resizing on fiddle:http://jsfiddle.net/r0k8244t/1/

Print Bug - No Content Shown Above 992px Breakpoint

When I try to print a page with the responsive tabs, if my screen size is larger than 992px the content disappears. But if it is smaller than 992px then the content appears.

Collapse all sections in mobile view

Does anyone know how to hook into the script to collapse all sections by default in the mobile view? Currently the active one is open by default and I'd like to have all sections collapsed in that view. Thank you!

text-decoration: none; not working

Hi,
I implemented your script, but can't get rid of the underscores of the responsive links.
Do you know how to do that!?
Thanks in advance!
Nice work!!!!
David
The HTML:

    <li class="active"><a href="#home" class="deco-none" data-toggle="tab">Web</a></li>
    <li><a href="#print" class="deco-none" data-toggle="tab">Print</a></li>
    <li><a href="#vid" class="deco-none" data-toggle="tab">Video</a></li>
     <li><a href="#hdr" class="deco-none" data-toggle="tab">HDR foto's</a></li>
     <li><a href="#hosting" data-toggle="tab" class="deco-none">Hosting</a></li>

The CSS:

}
.deco-none {
text-decoration: none !important;
}

Make entire panel clickable

Collapse/expand panel on click of entire .panel div rather than just the .accordion-collapse link.

Not working on Popup Modal

Hi

I have issue when i am use popup, you can see this screenshot

Thanks

Error thrown when relatedTarget doesn't exist

In collapsed mode when all tabs start out collapsed first click on a collapsed "tab" seemingly has no effect and causes an error to be thrown "Cannot read property 'hash' of undefined" on line 126 of responsive-tabs.js

Replacing

    var $current  = $($(e.target)[0].hash.replace(/#/, '#collapse-')),
    $previous = $($(e.relatedTarget)[0].hash.replace(/#/, '#collapse-'));

    $current.collapse('show');
    $previous.collapse('hide');

with the following:

    var $current  = $($(e.target)[0].hash.replace(/#/, '#collapse-'));
    $current.collapse('show');

    if(e.relatedTarget){
        var $previous = $($(e.relatedTarget)[0].hash.replace(/#/, '#collapse-'));
        $previous.collapse('hide');
    }

remedies the issue.

Scroll to top in mobile

Hi,

This is a very nice plugin. I am using it in my site. I want to add scroll to top feature for mobile device. When I click a tab it should scroll to top of the panel. Now it did not scroll. Some times it scroll to footer. Please help.

How to make the entire panel clickable?

Seems to be usefull to make tabs content collapse by clicking anywhere in the panel-heading.
Any idea how to do the entire panel clickable?

Change breakpoint to 1024 for tabs

Hi.
is there any way to change the breakpoint? right now the accordion is visible when the width is 992px or less. can this be changed? I am having around 10 tabs in my page and when I try to view it in an Ipad in landscape mode, it doesn't show me the accordion. is there a way to set it somewhere?

Missing license file

Hi ! Thanks for this cool add-on ! Could please consider licensing it ?
Thanks !

nav-tabs & tab-content NOT in same div

What about if a need the nav-tabs in one div, and the tab-content in another?
Something like this:

<div class="div-for-nav-tabs"
  <ul class="nav nav-tabs responsive" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
  </ul>
</div>

<div class="div-for-tab-content"
  <div class="tab-content responsive">
    <div class="tab-pane active" id="home">...content...</div>
    <div class="tab-pane" id="profile">...content...</div>
    <div class="tab-pane" id="messages">...content...</div>
  </div>
</div>

When nav-tabs and tab-content are not in the same level, when the screen is small, the tabs and the content disappears.

Is there a workaround for this?

tab not working on desktop mode in joomla

I have called css file head tag

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

And I have include following code in an article

<ul class="nav nav-tabs responsive" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
</ul>

<div class="tab-content responsive">
  <div class="tab-pane active" id="home">...content...</div>
  <div class="tab-pane" id="profile">...content...</div>
  <div class="tab-pane" id="messages">...content...</div>
</div>

and I included

<script type="text/javascript">
  (function($) {
      fakewaffle.responsiveTabs(['xs', 'sm']);
  })(jQuery);
</script>

I have called

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="js/responsive-tabs.js"></script>

Open tabs on collapsed container

Hi
I have a container who start closed when the pages load. When I expand the container, the tabs doesn't works
Steps:
1.- A Container (div) closed (by jquery on document ready)
2.- 4 tabs inside that container
3.- click a button to open the Container
4.- the tabs doesn't answer
5.- when I resize the page the tabs shows automatically (and works)

I try to call the function fakewaffle.responsiveTabs(['xs', 'sm']) in the 3rd step, but that duplicate the tabs.

Also, there is a way to call the function like $("#mytabs").responsiveTabs(['xs', 'sm']) [or a way to destroy it?]

Thanks!

Error on first click, when having multiple tab sections

if you have more tab sections like this:

<ul class="nav nav-tabs responsive" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
</ul>

<div class="tab-content responsive">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="profile">...</div>
    <div class="tab-pane" id="messages">...</div>
</div>


<ul class="nav nav-tabs responsive" id="myTab1">
    <li class="active"><a href="#home1">Home1</a></li>
    <li><a href="#profile1">Profile1</a></li>
    <li><a href="#messages1">Messages1</a></li>
</ul>

<div class="tab-content responsive">
    <div class="tab-pane active" id="home1">...</div>
    <div class="tab-pane" id="profile1">...</div>
    <div class="tab-pane" id="messages1">...</div>
</div>

clicking any tab in first tab section triggers activating first tab.
Example: if I click tab "Profile", that tab shows and after that "Home" tab shows again

Scroll to bottom on first click

1. In mobile view, open http://openam.github.io/bootstrap-responsive-tabs/
2. Scroll down below "How to" section and click on the "Key Features" tab.

You'll be taken to the bottom of the page.

difference in a mobile device

Hello!

I like the system of responsive tabs but is not the same looking in a mobile device,fonts are smaller and margins greater. when resize the navigator window in a laptop looks perfect.

Why this difference? please helpme ;)

sorry for my bad english

Tab content doesn't show in accordion mode

Hello. I have a problem with responsive tabs. When they aren't in accordion mode they works fine. But if they are, click on element doesn't show tab-content
here is the code for tabs0

<ul class="middle-menu nav nav-tabs responsive hidden-xs hidden-sm" id="middleMenuTab">
            <li class="active">
                        <a href="#catalog_middle_link_1" class="catalogLink" data-toggle="tab" id="catalog_middle_link" aria-expanded="true">
                Каталог продукции            </a>
        </li>
            <li>
                        <a href="/promotions-and-discounts">
                Акции и скидки            </a>
        </li>
            <li>
                        <a href="/services">
                Услуги            </a>
        </li>
            <li>
                        <a href="/shipping-and-payment">
                Доставка и оплата            </a>
        </li>
    </ul>

And there is the code for tab-content

<div class="tab-content responsive hidden-xs hidden-sm">
                <div class="tab-pane active" id="catalog_middle_link_1" style="position: absolute; background: #FFF; z-index: 5000; border: 2px solid #ccc;top: -2px;">
                    <div class="row middle_catalog_wrapper">
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=1">ЛЮСТРЫ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=9">ТОРШЕРЫ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=10">СВЕТОДИОДНЫЕ ЛЕНТЫ И КОМПЛЕКТУЮЩИЕ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=13">ГИРЛЯНДЫ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=14">ПРОЖЕКТОРЫ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=15">ПОДВЕСЫ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=16">НОЧНИКИ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=17">НАСТОЛЬНЫЕ ЛАМПЫ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=21">ТОЧЕЧНЫЕ СВЕТИЛЬНИКИ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=28">ЛАМПОЧКИ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=33">СПОТЫ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=39">ПОДСВЕТКИ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=45">ФОНАРИКИ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=46">ЭЛЕКТРОУСТАНОВКА</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=53">ТАРЕЛКИ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=54">БРА</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=59">ТРЕКОВЫЕ СИСТЕМЫ</a>
                            </div>
                                                    <div class="col-md-4 col-sm-6 col-xs-12">
                                <a href="/catalog/category?id=60">УЛИЧНЫЕ СВЕТИЛЬНИКИ</a>
                            </div>
                                                <div class="clearfix"></div>
                    </div>
                </div>
            </div>

Did I miss something?

Browser window resize problem

Hi.
I have noticed that bug also in Your demo site
When i resize browser window width to minimum (to check responsivenes) the responsive tabs works perfectly but when i resize to full width the content in this tabs are missing. Any ideas? Thanks in advance!

a real link inside the nav-tabs

hello!

i have a real link inside the nav-tabs. of course there is no content in the tab-content for it, because it links to a new page. also the href doesn't look something like this: href="#profile", but e.g. like that: href="http://www.example.com". of course the responsive tabs script crashes there, because it has no content for the tab and it can't do something with the href.
is there a solution for that? i tried to add a class "no-content" to the real link i the tab and then tried to make the responsive tabs script to ignore this one. but i didn't succeed..

Weird behavour on first click.

Clicking any of the tabs for the first time would show the new tab and then instantly return to the default tab. ( the one initially set with .active class ).

After some investigation I changed

var current = $( e.target ).context.id.replace( /collapse-/g, "#" );

to

var current = $( e.target ).context.id.replace( /#collapse-/g, "#" );

which seems to have solved to problem.

located at aprox. line 165

fakewaffle.bindTabToCollapse = function() {
 ...
 collapse.on( "shown.bs.collapse", function( e ) {
  ...
  var current = $( e.target ).context.id.replace( /#collapse-/g, "#" );
  ...
 }
 ...
}

I don't know if anyone else was having this issue, but I hope this helps.

Compatible issue? "tab-content" do not recover after resizing to full screen on desktop

I'm using Bootstrap version 3.3.2

This div should be filled with content while resizing back to normal size but it did not.

Collapse toggling bug

Hi.
This buggy behaviour applies to this demo page also, so to reproduce...

Clicking between the last two accordion links (Key Features and Source) will show correct collapse/expand toggle behaviour, but if you then click back to the first (How To), you will notice that the last one (Source) is still open, it has not collapsed.

If you play around with it you will notice this happens a lot (eg click first, then second, then back to first: second is still open).

NOTE: if you remove the .active classes from the markup, the problem is gone. You can then use:

$('#myTab a:first').tab('show'); // Select first tab

to show the first panel BUT this only works with the normal, bootstrap/desktop panel, it doesn't also trigger the first responsive accordion (should do).

PS, it would be good to have auto collapse/expand as an option. I would prefer to not use it as it causes unexpected page jumps during collapse when you use more realistic amounts of text in the panels.

Thanks

After Resizing

well i found some issue with my site,
when i resize the page the current panel disappear and could not be open until i resize the page a gain

i replaced this Code

 if ( $( '.panel-group.responsive' ).is( ':visible' ) === true && fakewaffle.currentPosition === 'tabs' ) {
            fakewaffle.tabToPanel();
            fakewaffle.currentPosition = 'panel';
        } else if ( $( '.panel-group.responsive' ).is( ':visible' ) === false && fakewaffle.currentPosition === 'panel' ) {
            fakewaffle.panelToTab();
            fakewaffle.currentPosition = 'tabs';
        } 

with this

 if ($('.panel-group.responsive').css('display') === 'block' && fakewaffle.currentPosition === 'tabs') {
            //alert(1);
            fakewaffle.tabToPanel();
            fakewaffle.currentPosition = 'panel';
        } else if ($('.panel-group.responsive').css('display') === 'none' && fakewaffle.currentPosition === 'panel') {
            //alert(2);
            fakewaffle.panelToTab();
            fakewaffle.currentPosition = 'tabs';
        }

and it solved it, good luck :)

Accordion tabs expand / collapse on click anywhere in tab

Hi,

I'm using bootstrap responsive tabs, which is working great.

Currently, in mobile view the responsive tabs can be expanded/collapsible when you click on the tab title(Anchor tag) . Is there any possibility of expand/collapse the tab when i click anywhere on the tab(div class="panel-heading").

Pls refer http://www.jqueryrain.com/ they have this effect.

Your help is highly appreciated. thanks

Bower package?

variable destination undefined in panelToTab() function

Variable "destination" is undefined in panelToTab() function.

Will try to send a pull request soon.

UL after Content Panes

Putting the UL after the Content Panes instead of before seems to break functionality. It will cause the tabs to disappear on resize instead of becoming a collapse. I am working on a fix and will create a pull request once I crack it.