samsono/easy-responsive-tabs-to-accordion

Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its action accordingly.

easy-responsive-tabs-to-accordion's Issues

jquery ui

Is think there is issue when using easy responsive tabs together with jquery-ui in the accordion view.

When i'm including http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js the accordion tabs are displayed badly wrong.

I was not able to figure out the reason for this.. maybe some naming issues.
Does anybody else noticed this?

Cheers Equa

A way to destroy tab

Is there a way to destroy the tabs from the element? This would be useful in cases where there's a need to dynamically re-create the list of tabs.

Edit: After looking at the code, I found out that it does have a way to do this after all:

$("#leTab").easyResponsiveTabs("destroy");

Accessible issue

Love love love this tabbing! It's the best one yet. Am using it for college.

However, there's an issue - it's not accessible friendly. I should've checked before implementing site-wide. Is there a way you can add accessible in there? I'll need tabbing and keyboard to work properly. Thank you.

Close all tabs on click of another element.

Hi,

Is it possible to have an element (say a link) that when clicked closes all opened tabs?

Thanks.

Close all tabs on load

Hi! Great job on the plugin. Question: How would you recommend updating the script to have all tabs closed on page load? Thanks for any insight.

Keep tabs closed on accordion mode only?

Hi! I'm looking for a way to keep all tabs closed on load but in accordion mode only. Horzontal mode must stay open on load.
Any help will be much apreciate. Thank's.

Linking from another page, tab open

I think this is related to the "Open a specific tab using a link" issue that is already closed...

I have some navigation items on the homepage of a site. Each item (or Problem) links to a specific tab (or Solution) within a single Solutions page. Each tab is a solution to a different problem.

How can I do this so that when a Problem link is clicked the corresponding Solution tab is open when the page loads?

I am somewhat familiar with jQuery but I am by no means an expert. The answer to the previous issue similar to mine did not resolve my problem. Thanks for your help. These tabs are great!

Tabs with route navigation of AngularJS

Navigation of tabs from url routes with angular route not routing properly to open corresponding tab.

/mypagelink|demoTab1

How to route this with angular.js? I am being routed to default link by angular router.

change name of tabs

Hi,

Currently the name of the tab panel is the name of the id plus a number.
Is there a way to name your tabs? That would be some awesome :)

Thanks in advance.

Easy-Responsive-Tabs-to-Accordion as a menu with a horizontal submenu

Hi,
I'm developing a menu with a horizontal submenu, based in your script. Some item's in my menu have sublevels and others don't, It's perfect for what I need, but when I resize a browser window or open in a mobile device, the item's without sublevels won't appear. I think it's simple thing, but my skills in Javascript are few. Can you help me?

Google Map

Hello,
Thanks for this good plugin.
I detected a problem with a implmentation of a Google Map. Al is good when the map is into the first tab but into another, the map get the good size but not the internal zone of google map.
See on http://landesocean.deevit.com/fr/48-location-maison_villa-6-personnes-moliets-et-maa.html

Have any solution or way to solve it ?
thanks

Regards,
Cedric

how to show hide on every click of tabs like

any way to hide and show the tabs-item on clicking of tab

Tab effects

It seems awkward clicking on a tab has no effect like fading, but the accordion has a toggle effect. Is this intentional? And would adding a fade effect to the tab view conflict with the accordion?

Using CSS (with Modernizer for animation detection), this is how I did it. Perhaps, there is a better way?

#demoTab .resp-tab-content > * {
opacity: 0;
}
@-webkit-keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
}
@keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
}
#demoTab .resp-tab-content.resp-tab-content-active > * {
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
opacity: 1;
}
.no-cssanimations #demoTab .resp-tab-content > * {
opacity: 1;
}

Compatibility with Prototype.js

Hey,

I've just installed your tabs on my magento site, but I started getting error's such as:
Uncaught TypeError: Cannot read property 'config' of undefined

and other with prototype.js

I tryed to add
var $j = jQuery.noConflict();

To responsive tabs script and then replace all $ with $j, but still the problem remains.

Could you tell me what should I change so this error would dissapear??

Thanks,

load time

Hi,
Thank you for a great plugin.
I'm having trouble getting the tabs to load quickly. There is a lag, and I can't find why or where. Here: http://ams3.siteground.eu/~ceaiulco/cei/investigacao/equipa/
Thank you for your help.
Ana Rita

Compatibility with Bootstrap 3.xx?

Hi, is it compatible with current Bootstrap 3 versions?

Nested tabs?

Hello. I would very much like to nest the vertical tabs within the horizontal ones. For example, I'd like to have a row of 6 horizontal tabs, and inside each of those would like a column of 8 vertical tabs. Can you think of an easy way to do this? I've tried it myself but haven't had any luck.

Thanks.

Linking to Tabs - I Can't make it work

Hi @samsono,

First of all, thank you so much for such a great plugin.

I am following your instructions but I must be doing something wrong.

I was wondering if you could possibly include an a couple of links-to-tabs in the index.html so they can serve as examples.

Thanks.

Best Regards

Need to dynamically disable particular tabs

How to disable tabs dynamically?

Thanks in Advance!!!!

linking to a tab from another tab on the same page

I am sorry to start his one as I see there is a closed issue on this. However in the closed issue the author only confirmed that it is working on links from another page.

Anyone able to make this work?
thanks,
Jay

You need to add this "container" and adjust some CSS....

Hello, appreciate the nice tab menu, especially the Vertical tab which is what I use.
I encountered a couple of issues when inserting the menu into my website.

1. I discovered that the menu (vertical at least) is not as "responsive" as it should be, the content box didn't actually adjust size.
   As well, the content box extended "beyond my page border on the Right of the page. So to fix this I created an extra DIV surrounding the HTML, that contains a "container" class such as this:

.vertical-tabs-container {
position: relative;
display: inline-block;
width: 99%;
margin: auto;
}

You should add the div to the HTML and also add this class to your CSS.
This makes the Menu fully responsive and fixes the content box being outside of a pages content.
For example, I inserted the vertical menu into the content area of another Tabbed menu, and your menu's content box extended beyond the right border of the page..

1. You'll also want to change the .resp-vtabs .resp-tabs-container css instead of 250px to this instead min-height: 350px;
   And you'll want to tell people that they will need to adjust this depending on how many tab options they have. The reason for this is you'll see one of the tabs "break" when checking responsiveness (i.e. adjusting your browser window for different sizes) because the content box isn't long enough in height.

You can see my website http://www.leeuniverse.com the Clan Menu for an example of your script atm.

Note also, I'm not a coder, so this may not be the perfect or best code, but it's at least a little better than what we had, because of the content box extending beyond the page, the content box also not being responsive, AND the tab text not "adjusting" being responsive for page size.

Note, this info only apply's to the Vertical Tab version. I haven't yet worked with the Horizontal one to know what happens.

to remove hash in url

I already submitting data from post method and after am going to use Easy Responsive tab plugin in vertical type, it passes '#' and id name in url when am going to navigate to tabs, I dont want this in url, how can I sort this?

Bug with iframe Google Map & Bing

Hi

if you have a Google map with iframe into the first tab, that's work, but into an another tab, the map get the good size but not the internal zone of google map.

Have any solution or way to solve it ?

Thanks

Best regards

Does not work with latest jQuery

Bummer.

can not adding background

Can not add background color for vertical tabs, but I can add background color to the default horizontal tabs.

Linking to Tabs: Use Tab Name istead of Number

Would it be possible to extend the plugin, so that it is possible to link directly to a content with using the title for the anchor link instead of the number?

Example
Three Tabs with the names: Cars, Bikes, Planes
If I Like to link to Bikes I would use http://yoursite.com/tabs.html#{TAB ID}2

I think the plugin would be more flexible and SEO friendly if it would be possilbe to link to http://yoursite.com/tabs.html#Bikes instead.

Do you think this is possible?

JS is not up to scratch

Firstly, why is there a random:

console.log('here');

In the JS file? You can't just leave logs in to annoy people.

Secondly, everywhere that you've referred to elements by doing things like:

$respTabs.find('.resp-accordion.' + options.tabidentify)

Causes errors and doesn't work if the option is empty.
Which is obviously because of how you couldn't similarly do:

$respTabs.find('.resp-accordion.')

You need to have some serious if statements going on there to get the behaviour you're after, to inject the second . only if necessary.

Remember last tab via updating URL hash

I think you got something nice here. It would be really cool to be able to remember the last tab you were on by updating the URL hash when you click on a tab. Maybe even being able to update a hidden field with the hash as well so you can stay on that tab when you submit a form. Keep up the good work!

Linking from one tab to another?

Bit of a newbie question I'm sure, but how do you create links that take you from one tab to another within this accordion?

Set Default Tab

I have a tabs that are dynamically loaded and I want to set one of them as the default one.

I added class="resp-tab-active" to the list item to be opened by default. However, this didn't work. I tried putting the item at the beginning of the list which works only if there are more than 1 items in the list.

CSS is over the top

For a start it styles body .. setting a font and things.

Can't you make it more modular so people can use it more easily? Perhaps a stripped down version of the CSS that only contains a simple, plain structure. i.e. just borders and positioning.

Compatibility in internet explorer 9

I tried this on IE9 but it seems that hash not working like #abouttab2 when navigating to through different tabs. Can you recommend me what to do?

Not working on IE8 and 9

The plugin is not working on IE8 and 9 (maybe 7) whereas it is said in the Features :
Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)

I made my tests on the official demo : http://webthemez.com/demo/easy-responsive-tabs/Index.html

Any advices ?
Thx

Get rid of styling the body tag

In css/easy-responsive-tabs.css the body tag gets styled with a background and font-family. This breaks styling in (for example) my admin theme on certain pages. I suggest removing this body styling.

Chrome issue with EqualHeight and NiceScroll combined

I have an issue when I use NiceScroll and a custom EqualHeight plugin to make the list (verticalTab) and the container of equal height. Chrome isn't giving me my equal height when there's more than one verticalTab with NiceScroll integrated.

See my detailed description below and demos. Do you have any suggestions on the issue?

This concept has each of the “.resp-tabs-container” configured to have overflow:auto and the height of the container to match that of the “.resp-tabs-list” on the left for the VerticalTab. That way when more lists are added then the height of the container will always have equal height to the list on the left. Testing this within Firefox, Safari and IE works great, but Chrome has an issue when using NiceScroll plus my EqualHeight plugin when there's more than one VerticalTab.

Scenario 1: When using Chrome (mac or windows) the EqualHeight works only when I resize my browser window just a little bit with NiceScroll integrated. In my demo, resize the column in the middle while using Chrome to see the EqualHeight snap into place. Note: It would be great to not have to resize the browser for the equal height to snap into place.
Demo: http://jsfiddle.net/RTAT5/3/

Scenario 2: Should I remove NiceScroll then EqualHeight works great with Chrome without resizing the browser! Note: It would be preferred not to have to remove NiceScroll.
Demo: http://jsfiddle.net/RTAT5/4/

Scenario 3: Meanwhile, with NiceScroll integrated and there's only one “verticalTab” instead of two verticalTabs then Chrome shows equalHeight without resizing my browser window. Note: This is the preferred option, because everything is working, but I'm limited to only one verticalTab per page.
Demo: http://jsfiddle.net/RTAT5/6/

Update I figured out when I have more than one "verticalTab" and I use this plug-in Chrome doesn't play nicely when this is used to style the scrollbar automatically with niceScroll
$(".resp-tabs-container").niceScroll({
cursorcolor:"#d5dcdd",
cursorwidth:7,
autohidemode:false,
cursorborderradius:0,
background:"#eceeef",
cursorborder:0
}).resize();

However if I use just this plug-in so scrollbar only gets styled on mouseover then there's no issue, but then the user is shown an unstyled scrollbar until they mouse over. Note: I know I can use overflow:hidden to hide the scrollbar until the user hovers over the content, but this is not ideal.

$(".resp-tabs-container").mouseover(function() {
$(".resp-tabs-container").niceScroll({
cursorcolor:"#d5dcdd",
cursorwidth:7,
autohidemode:false,
cursorborderradius:0,
background:"#eceeef",
cursorborder:0
}).resize();
});
Demo of this update (use Chrome): http://jsfiddle.net/RTAT5/7/

I hope my code, description and demos were helpful!

How to use Class instead of ID for index.html#undefined1

It is my understanding that using ID will prevent showing #undefined1, #undefined2 and so forth on URL. However I prefer using Class since it will used as a widget. I do not want to have more than two same IDs on same page.

Is there a solution to fix this to show actual hash name instead of undefined when using Class? Thanks!

Enable link to tab

Is it possible to add such a function would be handy sometimes necessary to activate the table by number or ID
example:
a href='tabs.html#2"> open second tab

How to hide the anchor (index.html#undefined1)

Hi, first thank's for this great plugin. I like to know how I can hide the Anchor displayed on the address bar when I clic on a tab (index.html#undefined1, index.html#undefined2, index.html#undefined3...)?

How to Activate tab from an anchor on the same page?

Hi,

Awesome plugin!
How do I activate a tab by clicking on an anchor on the Same page?
For example I have some tabs, then at the bottom of the page I have a button that links to "#tab1", I want clicking on it to activate "tab1" from my tabs?
Thanks in advance!

New option 'tabidentify' throws an error when left as the default (blank)

Error:

Uncaught Error: Syntax error, unrecognized expression: ul.resp-tabs-list.

The extra period at the end is being added even if tabidentify is empty (which is the default option):

$respTabs.find('ul.resp-tabs-list.' + options.tabidentify)

Not really an issue - scroll to the beginning of the tab on accordion?

On a mobile, when it turns into accordion, if I am reading a long text on tab 1, at the end of it, I tap on tab 2, then tab 2 opens, but I will be looking at the bottom of tab 2, rather than automatically scrolling up to the beginning of tab 2.

I know this is not an issue, but would be great if it does this. Without this, after tapping on tab 2, I would have to scroll up to the beginning of tab 2 to continue reading.

Any ideas?
Thanks for your help.

many horizontal tabs wrap, selecting top row tab pushes lower tabs aside?

If there are many tabs horizontally, they wrap to a second line, which I DO want, but then if you select one of the above, the ones below get awkwardly pushed aside. Hard to describe. Anyone used this to do more than one row of tabs? I really need to figure out a solution for this. I want all the tabs to stay put.

Thanks

Linking to tabs doesn't work when linking to a tab like an in-page anchor

Linking to tabs works great if the link is one on page (say test.shtml) and the tab is on another page (say index.shtml).

If I am on index.shtml and I have text on tab 1 that links to tab 2 (also on the index page), how do I do that?

Upon implementing the new instructions, the URL changes to the appropriate tab but the content on the page doesn't switch to the new tab.

Thanks!

Keyboard arrow up and down feature navigating tabs?

Just wondering if someone has written a feature where you can use the keyboard up and down to navigate thru the tabs rather than clicking it?

Thanks for the info :- )

Incompatible with jQuery 1.11?

jQuery v1.11.2 is throwing an error:
Uncaught Error: Syntax error, unrecognized expression: ul.resp-tabs-list.

Automatic change of the tabs

Hi,

Thanks for releasing the tabs for free.
I wanted to ask you, if there's a way to make the tabs change automatically (rotate).

Thanks very much:)

Tabs rewrite the whole url.

Hi,

When I click on a tab my complete URL will be deleted and it is only http://mydomain.com/#parentHorizontalTab2.
How can I fix the problem?

Thx!

Open a specific tab using a link

Hi,

great plugin!
Is it possible to open a specific tab using a link (on the same page)?

Need to disable other tabs on current tab click

Bower

Would be great to install this as a bower component.
Happy to create a Pull Request if you are cool with the idea.