[Resolved] Bootstrap Tabs don't respond

[Author]

Posts

[CraigT4149]

I am trying to:
Simply use bootstrap tabs in which I store in each tab a filter criteria to update a view below.

Link to a page where the issue can be seen:
hidden link

Referring to this old thread, I copied Beda's default Bootstrap HTML Markup for tabs and it doesn't seem to work: https://toolset.com/forums/topic/bootstrap-tabs-problem/

I have Bootstrap enabled because I'm able to create grids, etc.

Thanks

[CraigT4149]

Interesting development: when the page first loads, the tabs do not work.

Once I select a filter element and the results change, the tabs now work ...

[Luo Yang]

Hello,

Thanks for the details, I can see the problem in your website, please try these:
1) In case it is a compatibility problem, please deactivate other plugins, and switch to wordpress default theme 2017, and test again

2) If the problem still persists, please provide database dump file(ZIP file) of your website, also point out the problem page URL and view URL, I need to test and debug it in my localhost, thanks
https://toolset.com/faq/provide-supporters-copy-site/

[Luo Yang]

Thanks for the details, I am downloading the file, will update here if there is anything found

[Luo Yang]

Please try these:
1) Edit the view "Filterable Product Search", in section "Search and Pagination", change this line from:

<div class="container">

To:

<div class="container" id="myTabs">

It will add a HTML ID to the div tag

2) click "JS editor", add below codes:

jQuery('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

It will setup that div tag as a jQuery tab, see the codes in the document:
hidden link

Save and test again

[CraigT4149]

Thank you, that did it.