Collapsed Tabs

30-Nov-2015 10:09:45

Hi, you can keep collapsed all the tabs when the page loads? No default tab set. Many thanks.

30-Nov-2015 19:32:49


If you want to hide tab content at default load, you can create an empty tab button in “button-holder”, provide it a data-tabid value (e.g: data-tabid=”nocontent”) and set tab-active for it.


<div data-tabid="nocontent" class="tabbt tab-active"> </div>

Then, you create an empty tab content in “content-holder” for the above tab button.


<div data-tabid="nocontent" class="tabcontent"> </div>

That’s it. At default load, the tab content with data-tabid=”nocontent” will be displayed but you won’t see it because it is just empty.

Kind regards.

09-Feb-2016 15:17:27

I have a similar problem this solution does not fix. When you load the page initially within a mobile screen you do not see any of the tabs. This works fine on a desktop screen, all tabs are displayed with none active, but does not work for mobile. All I see is my close button to the far right. I essentially want to load in the state of if I had a tab active and clicked close, causing all tabs to then display.

10-Feb-2016 08:33:55

Hi CMulloy,

Thank your for reporting.

I confirmed the issue and will try to provide a fix for it soon. At this time, you can try this temporary solution:

Try to replace the tab button code above:

<div data-tabid="nocontent" class="tabbt tab-active"> </div>

by this one:

<div data-tabid="nocontent" class="tabbt tab-active solid-black light-text button-smalltile tabformobile">

<span class="button-icon"><i class="icon-windows"></i></span>

<span class="button-title">Select Tab</span>


Then, open "tabion.css" file and find "@media screen and (min-width:960px)" section and add this code into it:

@media screen and (min-width:960px) {

.tabformobile {

display:none !important;



By this way, at the default load on mobile devices the plugin will display a button [Select Tab] to open the tab list.


11-Feb-2016 16:03:37

Thank you for the quick response, that is a decent workaround for now. Please let me know if you come up with a fix for this though.

12-Feb-2016 08:58:20

The fix is almost done. I will try to update in the next week.


15-Feb-2016 09:37:54

Excellent that will be great. Just FYI, when I use the workaround I am actually having an issue with my page loading twice. Perhaps it is hitting the jquery exception causing a reload I am not sure. Essentially when I try to use a dummy active tab with no contents it fires page load within the tab and I get all of my page contents duplicated within the active tab.

17-Feb-2016 07:19:44


I updated a new version that was added the feature to show/hide tab content at default load. You can go to CodeCanyon and download it.

To hide tab content in the new version, you just add a javascript param (activetab: false) when calling the plugin and remove "tab-active" class in HTML code (read "demo5-hiddencontent.html" file for more detail).

Please try it and tell me the result.


17-Feb-2016 11:19:22

Looks like we are good. I appreciate the quick turnaround on this.