Collapsed Tabs

Hi,

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.

Example:

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

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

Example:

<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.

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.

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>
</div>

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.

Regards.

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.

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

Regards.

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.

Hi,

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.

Regards.

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