Skip Navigation

[Resolved] Controlling Tabs Cell from JavaScript

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to use custom JavaScript to control some tab cell elements.

Solution: Use the Bootstrap tab component API to manipulate tab selections. Here's how you might select and show the last tab in the first set of tabs on a page after clicking a link with id "btn":

jQuery(document).ready(function(){
  jQuery(document).on('click', '#btn', function(){
    jQuery('.nav.nav-tabs:first a:last').tab('show');
  });
});

Relevant Documentation:
https://getbootstrap.com/docs/3.3/javascript/#tabs

This support ticket is created 6 years, 3 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 2 replies, has 2 voices.

Last updated by samuelel 6 years, 3 months ago.

Assisted by: Christian Cox.

Author
Posts
#1084734

Hi,

Could you please provide a reference on how to control the Tab Cell generated with Toolset from JavaScript or JQuery?

I have a Tab Cell with 3 panels and I would like to bring one of the panels forward when I click on a button in the text area.

Thanks

#1084763

Hi, Toolset Layouts tabs implement the Bootstrap tab component, so you can find lots of documentation here: https://getbootstrap.com/docs/3.3/javascript/#tabs

Here's how you might select and show the last tab in the first set of tabs on a page after clicking a link with id "btn":

jQuery(document).ready(function(){
  jQuery(document).on('click', '#btn', function(){
    jQuery('.nav.nav-tabs:first a:last').tab('show');
  });
});
#1087640

Thanks, that worked