Multiple instances of EasyTabs

[joneslafuente]

I have 2 instances on my page and each has by default no panels showing, just the tabs. Each opens and closes ok but how can I close any open panels of the other instance, so effectively resetting the other instance to its default no panels state.

I have tried:

$('#tab-container-1').easytabs().slideUp();

But this closes the whole instance, tabs as well as panels. Can't seem to target the panels alone.

Many thanks

Brian

[DaAwesomeP]

@joneslafuente, so you want to set the Easytabs to have no open panel but still show the navigation for the tabs? You could try creating a blank panel, set defaultTab to it and then use display: none; on the navigation button for it. It will appear that not tabs are selected. To switch to the tab, you can use:

$('#tabs').easytabs('select', '#empty-tab');

Be sure to change it to have the correct IDs.

[joneslafuente]

Excellent, thanks. I had just thought of doing that and started as your reply came through. Glad to say it all works great.

[JangoSteve]

@DaAwesomeP is a good suggestion. Just for completeness, I'll mention an alternative. The behavior you're describing is what the collapsible option is for. If you instantiate your easytabs instance with collapsible: true, then when you select a tab that's already active, it will collapse the active panel. In other words, click a tab once, it selects the panel, click an active tab again and again, and it toggles the panel between collapsed and uncollapsed.

With that in mind, assuming you have tabs with collapsible enabled, you could also just select the active tab:

$('#tabs').easytabs('select', '.active');

I haven't actually tested the above, but I think it would also work.