Hello, I was wondering if its possible to have jquery.cookie remember which tab was selected.

HI!
I'm so very thankful that you made this wonderful plugin.
This help me a lots!
But I have a question,when click a Global navigation/(following example: '.slide1 li a') which link to each tab,
Current demo link to each tab top,but I want to adjust to link to screen top with opening target tabs.
('cause have space between screen top and tab top.)

I tried to onClick="window.scroll function but seems didn't work,
how can I change link to screen top instead of tab top?

• link to #tab-1
• link to #tab-2
• link to #tab-3

Hello,
I have been using this tab plugin,i completed inserting succesfully one complete horizontal tab,
BUt the problem is i want another horizontal tab in the same page,how to achieve this,???

Thank you very much for this useful plugin. I love the controls I can have on the behaviours of tabs and accordions.

I must be doing doing something wrong as my accordion titles do not change their status when they are deactivated. When one of the accordion panels is open and click another, the first panel close ok and the 2nd panel opens up, but the "r-tabs-state-active" css class stay on the div tag. I understand the correct behaviour is this should change back to the default.

Would it be possible for you to review my markup below and tell me what I am doing incorrectly?

   <section id="tabs">
            <h2>heading</h2>
                <ul>
                    <li><a href="#tab-1">Responsive Tab-1</a></li>
                    <li><a href="#tab-2">Responsive Tab-2</a></li>
                    <li><a href="#tab-3">Responsive Tab-3</a></li>
                    <li><a href="#tab-4">Responsive Tab-4</a></li>
                    <li><a href="#tab-5">Responsive Tab-5</a></li>
                </ul>
                <article id="tab-1">
                    <h3>heading</h3>
                    <p>text</p>
                </article>
                <article id="tab-2">
                    <h3>heading</h3>
                    <p>text</p>
                </article>
                <article id="tab-3">
                    <h3>heading</h3>
                    <p>text</p>
                </article>
                <article id="tab-4">
                    <h3>heading</h3>
                    <p></p>
                </article>
                <article id="tab-5">
                    <h3>heading</h3>
                    <p>text</p>
                </article>

            </section>
            <script type="text/javascript">
                $(document).ready(function () {
                    $('#tabs').responsiveTabs({
                        active: 0,
                        startCollapsed: 'accordion',
                        collapsible: 'accordion',
                        rotate: false,
                        animation: 'slide',
                    });
                });
            </script>

I wondered if it were possible to change the slide animation, so that when opening a new tab.. the current tab slides up, then after that, the new one slides down. Which I think makes more sense visually.

I did a little fork https://github.com/entozoon/Responsive-Tabs

Which gives it extra options (only affecting animated transitions, separately for accordion or tab mode) to be used like this:

$('.responsivetabs').responsiveTabs({
    animation: 'slide',
    patientAnimationTabs: true,
    patientAnimationAccordion: false,
});

Feel free to merge the change into yours if you like.

We were building a tabset with your script and noticed that your code makes assumptions on the code.

One of our developers wrote the tab panels as <li>s inside a <ul>, which worked fine until he added an <a> tag inside the content.

The following function ResponsiveTabs.prototype._loadElements on line 140 assumes that the navigation will always be a <ul> and the content won't. Therefore breaking the script when the markup isn't what you expect.

Ideally, if you have an option to specify the navigation element you can avoid this scenario.

Hi!

When using the accordion layout (we use it on mobile) and opening a new "tab" any previous tabs are being automatically closed. That's fine except that when you have opened a tab with a lot of content and then open another one below that (without closing the first one) the new tab slides out, then the old one slides in and the results are that the visitor is now at the bottom of the newly opened tab and have to scroll all the way back up to start reading the content.

I haven't found a setting where I can disable this behaviour? To just keep any opened tab still open

When dynamically adding a new tab via ajax (done by adding a new

How can i enable disabled tabs?

The tabs stay collapsed (despite startCollapsed: false) if they are inside a hidden div (FAQs). Example:

<div style="display: none;">
<!-- [Tabs] -->
<div class="tabs">
    <ul>
        <li><a href="#tab-1">Element1</a></li>
        <li><a href="#tab-2">Element2</a></li>
        <li><a href="#tab-3">Element3</a></li>
    </ul>
    <div id="tab-1"><p>Tab 1</p></div>
    <div id="tab-2"><p>Tab 2</p></div>  
    <div id="tab-3"><p>Tab 3</p></div>
</div>
<!-- [/End Tabs] -->
</div>

Hi, i use this really usefull script in a project, event transform it to a vertical look, but as a js beginner, i don't know at all how to open the tab on over instead of click. Can you share your knowledge please?

Thank you !

Chrome has a bug when window.location.hash is updated it does a complete page repaint/refresh of and so looks like the page is jumping when clicking between tabs.

See - http://stackoverflow.com/questions/5657083/window-location-hash-refresh-in-chrome

To stop this could we look at implementing history.pushState for supported browsers and then falling back to windown.location.hash for older browsers?

Let me know if you want this as a pull request?

I do love Responsive Tabs, but at the moment this is a bit of a blocker for me.

The tabs don't have a tabindex and can't be accessed by keyboard.

This is easily fixed by adding tabindex="0" to the clickable elements (li items and h2 for accordion), and adding something like this to the js:

$currentTab.keypress(function (e) {
    if (e.keyCode == 13 || e.keyCode == 32) { // Detect enter or spacebar
        $currentTab.click();
    }
});

Hello - I didn't see anything in the instructions about how to add more tabs.

I've added 5 more in the HTML, but there's obviously more that needs to happen codewise.

Thanks!

Hi,

I'm looking for a way to destroy the call to the plugin at a given screen width.
Indeed I want to use the callback activate for small screens only.

My first attempt was to re-call responsiveTabs(); for small screens and add the callback, but the new call is not triggered due to the first one (for large screens).

Then, as I use enquire.js, I thought I could use enquire's unmatch function to destroy the first call (large screens) and call a new responsiveTabs()

Is there a way to do this ?

I'm having trouble understanding how to use your events to fire other elements. I have this code:

// hook into ResponsiveTabs event and manually trigger 'resize' event so that Slick recalculates the widths
$('#horizontalTab').on('tab-load', function (e) {
    $('.slick-carousel-responsive').resize();
});

However, I have no idea how to use the 'tab-load' events you've posted on your site. Can you please explain this, and hopefully give me a little push on how to set this resize() action up when the tabs load?

Hi, great developpement, i enjoy it !
But when i open your demo link on IE 7 or 8, all is open and no tabs ?!
Like if JS deosn't support ?
Have you tested well on this two IE version ?

Many thank's.

I've managed to get it working properly in most browsers but it does not render in IE7.

Hi
Thanks for this plugin very helpfull !
I don't know if this is possible (I didin't found it) but it would be good to be able to set a default tab on init parameters.

Bye.

Hi there,

by adding > startCollapsed: 'accordion' < to the javascript function, on a mobile device the accordions starts collapsed, but on higher widths normally the first tab should be open. So far, so good.

Problem:
if you have a device, which has a lower width than the media query breakpoint, the accordion start collapsed as it should.

But if you change now e.g. from portrait mode to landscape mode, and the resolution of the device gets bigger than the media query, all the tabs are still collapsed (because the device started with a collapsed accordion)

There should be some check after passing the width of the media query....otherwise this leads to a faulty impression.

is there away to enable and disable tabs in the same way as activate and deactivate:
e.g:
$('#responsiveTabsDemo').responsiveTabs('disable', 0);
$('#responsiveTabsDemo').responsiveTabs('enable', 1);

I really like how the script works but I have a particular situation where the content is getting pretty long and while I like having tabs on desktop I would prefer to have all panels expanded on mobile to avoid a lot of scrolling up and down. Is this posible?

Thanks,
Gabriela

Hi its pity but its not possible to set nested tabs.
The tabs styles mess up on a tab where I created nested tabs.

Hello !
I need to have multiple block containing the tabs.
So far only the first works.
I think it is a problem of ID.
I replaced by # horizontalTab. HorizontalTab but it does not work ...

Txs

I'm so very thankful that you made this amazing plugin but may I asked a question. I'm trying to add some codes to enable the tabs to reload once clicked. I add this line of code

activate: function(clicked) {
location.reload(false);
}

unfortunately once I run the code the page keeps on reloading again and again. Hope you can help me. Thank you.

I'd like to be able to bind to events without having to set them up during the plugin initialisation.

Can the activate, deactivate etc events actually trigger that event (namespaced of course) so they can be bound just like a 'click' event?

I would like to have an option to disable automatic insertion of classes an accordion title blocks, and rather write final markup myself. I'm using this tabs in TYPO3 Neos and the markup transformations cause a lot of problems.
What worked for me was just to change lines 171-2 to:

$accordionTab = $panel.prev();
$accordionAnchor = $accordionTab.children();

I understand it may not be interesting for you, so it's OK if you just ignore it :)

Hi,
I have noticed an issue when resizing screen and before reaching the accordion breakpoint:
Basically divs are folding (as expected anyway) and if you have 5 tabs and the second is selected then the selected tab appears in the first row "disconnected" from the body.
Since I am using your plugin for another project of mine I have added a quick fix to solve this and move the selected tab last so it will always be attached with the tab body.
May not be the most elegant solution since I am not a jquery expert but it works :-) If interested I can share my version with you so to add this enhancement in a future version.
See the attached screenshot on what I mean if it is not clear from my description
--Manos

Original script:

With added fix the tab is moved last so it is attached to the body. It goes back to original position when screen is big enough again.

I like this responsive tabs, the best I have found yet. Hope you will integrate some animation for the accordion, then it is perfect :)

Anyway, when you click a tab that is already open, the tab collapses. Should stay open.

Thanks for continuing the work on this!
Unfortunately, neither IE7 or IE8 are working for me. I did update the code from your fix on 3/31/14, but I'm still getting the same results that were shown in Issue #14.


Now I'm viewing these in the IE Emulator on my machine, but have tested the demo URL on a machine with a WIN XP/IE8 setup with the same results.
Normally I wouldn't bother with outdated versions of IE, but IE8/IE7 makes up over 11% of our user base. Plus 90% of our company employees are still operating with XP/IE8, and they need to use the site!

There are a few different ways to handle this but I thought I'd get your take before choosing one. On a tab with a lot of content, the anchor jumps to the top of the tab content, scrolling the menu tabs off the top of the page. This creates a confusing user experience.

Typically I'd use a JavaScript ScrollTo, minus the height of the tab bar. I wondered if you might have a better solution.

hello,

it seems that the latest version does not work on internet explorer 8? see attached file.

kind regard
martin

I found that where the content of the tabs have multiple

's this caused a problem with updating the state on the and thus triggering the 'tabs-activate-state' function. Which meant the options for 'startCollapsed' were being ignored.

I changed the selector in the prototype ResponsiveTabs.prototype._setState from:

var $ul = $('ul', this.$element);

TO

var $ul = $('> ul', this.$element);

Which ensured the event was triggered. Hopefully this will help anyone having the same issue!

If you select collapsible to be accordion in the javascript and then resize from tabs to accordion, the accordion is not collapsible. Also (this might be a bit nitpicky), if you go from a collapsed accordion to tabs, wouldn't it be better for the tabs to be not collapsed if the collapsed is only set to accordion? Thanks!

The active tab API to choose which tab is active on load isn't working it always chooses the second tab (index 1) I want it to have the first tab open on pageload (index 0)

Using this for js

               $('#responsiveTabsDemo').responsiveTabs({
            startCollapsed: 'accordion'
               });

Using this for HTML. If I remove the list inside here, it's OK

Blah Blah 1


Blah Blah 2



    <div id="tab-1">
                <div class="col_4">
                    <p>Blah blah blah blah blah</p>
                </div>
                 <div class="col_4">
                    <ul class="blue-bullets">
                                <li>Blah blah blah blah blah</li>
                                <li>Blah blah blah blah blah</li>
                                <li>Blah blah blah blah blah</li>
                                <li>Blah blah blah blah blah</li>
                    </ul>
                </div>
                 <div class="col_4 tab-content">
                    <p>Lorem Ipsum</p>
                </div>
            </div>
    <div id="tab-2 tab-content"> ....... </div>
    <div id="tab-3 tab-content"> ....... </div>
</div> </pre>

    

I'm currently trying to do custom styles, and finding I have to over-ride a lot of styles that aren't required to get the basic functionality.

It would be great if things like rounded corners, colors and font-styles were left out, or optional allowing developers more flexibility without having to override quite as many nested css rules.

Im wondering if there is a way to remove the moving of page when Im switching tabs like it stay on position and will not move when I change tab.

By the way, this indeed a great plugin :)

Thank you.

main field in bower could be an array.
I build my projects with Gulp and load components based on bower.json info.
Can you make this fix?

I'm trying to set this so there is no animation effect. How can this be done?

Thanks,
Eric

Hi,
Just wondering how i would implement a link from outside the main horizontalTab div to scroll down and open the required tab? I have been trying to add a simple on click event but it seem to stop the tab event from firing. If i add the scrollTo to the callback activate: it scrolls on load. ANy ideas. Many thanks.

The json object passed to the responsiveTabs method, used to initialize and render the responsive tab control, contains an "active" option. This option will open the active tab upon successful initialization in the desktop breakpoint of this control, but not for the mobile (tablet and phone) breakpoint;

@media only screen and (max-width: 768px) { ... }.

So, in short, active works for desktop but not for mobile.

I like just to include component and use it in html without calls.
Example: http://jquery.malsup.com/cycle2/demo/basic.php

.r-tabs-init could initialize tabs
And data-r-tabs-* attributes could set individual parameters.

Hello,
I am using jquery.responsiveTabs.js 1.3.5 and tried implementing "activateState" callback function which suppose to get called on view changes from tab to accordion and vice-verse. But i found that it never gets called. After that I opened responsiveTabs.js file and tried finding the references for "activateState" callback. But it never gets called from any place within this plugin file. Has some code got missed during latest release. Please let me know. Otherwise plugin works nicely. Thanks for this plugin.

Hi, this is a great plugin, but having trouble adding a close (X) button to the expanded tab.

I've added

$('.closeBtn').click(function () {
$('.r-tabs-panel').hide();
});

and it closes the tab, but I cannot reopen that same tab I just closed. Any help will be appreciated. Thank you!

I'd love to have vertical tabs degradable to accordion as well!
Can provide a PR if needed.
Guess it can be done with mere css though.

Setting the option setHash to true adds a unique URL hash each time a tab is opened - great feature. Opening a URL with hash via link or typeing in the adress bar opens the corresponding tab - just as expected and advertised.

Navigating through the browser history via the browser's back / forward buttons however does not open the corresponding tabs, instead nothing happens, the last opened tab stays open.

Hi Jellekralt,

I am using your plugin Responsive-Tabs in one of my application. I have created static HTML and used plugin where no issues.
But when I deployed code then getting Type error oTab is undefined. I tried to resolved but not succeeded. So could you please let me know about same.

first of, great work with the responsive tabs.

quick question. I'm adding a function call to the activate event, but can't seem to figure out how to get the index of the selected tab in this call?

i.e.
activate: function() {
console.log(new active tab index?);
}

I have some ajax loads that I need to do only on certain tabs to make the site faster.

thanks!

Would it be possible to set what type of html element / tag .r-tabs-accordion-title is applied to.

Ideally I need to specify that this could be a h2, h3 or span

I am more than happy to put in a pull request for this ...

The default would be just a <div> for backwards compatibility purposes

I am thinking a setting called accordionTitleElement