Hey, I did some improvements for the scrollToAnchor behaviour, which didn't work as expected / at all for accordions without animation.

I also included the option to automaticaly calculate body offset and add this to the scroll offset. This is usefull when a fixed header navigation is present.

I also did some cleanup of the CSS classes and loosened the prerequisites for the tab HTML structure.

I took this project over from someone else, so I may be overlooking something simple. I have 5 tabs, each with a search bar in the content. When I display in Firefox and Chrome I only see one search bar (whichever tab is selected). In both IE11 and IE8 I see all of the search bars. How can I make IE behave?

Thanks

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>

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.

first of all i am very glad that i have found this solution for the one pager I am creating. I use this solution to show a painting gallery with different categories (people, animals etc.) in 1 html page. it looks great! (i changed the css a bit). now the issue with the smartphone design:

when i click on a tab it opens the galery: perfect. but then i scroll down, look at all the paintings and i find the next tab. then i click on this tab: then it jumps to far in my webpage. it does open the galery but jumps to far, beyond the paintings in a new section. this section does have an anchor to, which i created to introduce the painter. But as a user you loose sight on the paintings and you might think it does not work as your are in te next section then. the user has to scroll back up to see the paitings for that tab. when i first close the original tabs (then all tabs are close) and then i open a new one it works correctly. but it might not be intuitieve for an end user. do you recognize this issue?

if you want i can sent you the files. to see what happens. kind regards!

I'd like to be able to stop an active tab from being deactivated. Is there a setting for this?

You can see the behaviour on http://www.landcoalition.org/en/resources if you expand the filters and then click on a tab twice. It will toggle between active and inactive states which is odd as the collapsing of the panel has been disabled for tabs.

Hello, I use the plugin with: responsiveTabs({collapsible: "tabs"});

So I only want tabs and no accordion. After resizing the browser it is always possible to completely close all tabs by clicking on the active tabs navigation item. No content anymore for the user, only navigation is visible.

Is there any chance to disable that?

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?

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!

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.

Just a question...

Why does the demo default behaviour actually not follow what you actually want or expect it to do?

When I click a tab I want the tab content to reveal, not show in a separate box the fact the tab has been clicked. Now I am sure this is all very clever and that but what I and my users want is that when they click a tab they can see the content in the tab and not be told what they have clicked.

This seems utterly, utterly stupid.

I am not a programmer but I want to use this type of element without having to pick it apart just to get the default expected behaviour of something to work. Consequently I am now having to look elsewhere for something I can actually use...

I've got this working but would like to have it show on all devices, so no breakpoint.

Just can't find where it stipulates when to switch to the accordions.

Thanks

When scrollToAccordion is set to true you jump directly to the open tab on mobile devices. So a check was added to only open the first tab when the actual device is not a mobile.

Thanks for providing such nice plugin to use. But plugin is not updated with aria label like https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html which is required for WCAG and screen reader.

Hi,

Just noticed that tab order is different on mobile phone.

I would like tab-1 to be on top of all the other tabs, however it comes second from the bottom. Is there any suggestions to fix this?