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

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, 4 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