[Resolved] basic Bootstrap Accordions not working after moving site to Divi theme

[Author]

Posts

[Michael]

I have basic custom HTML in an HTML block to allow search fields to be contained within a Bootstrap accordion. We recently moved over to the Divi theme from Colibri where the accordion panels worked fine.

Page(s) in question do not use Divi builder - built with Gutenberg:

hidden link

Am in touch with Divi who tell me to talk to you Toolset ....

[Michael]

Apologies - I failed to describe the issue .... the accordions no longer expand on click so users cannot access the actual search filters within.

I am talking to Divi, too, but they are fairly insistent that issue will sit with Toolset ..... i just need it to work.

[Christian Cox]

Okay we can try a couple of things. First, it's possible that Bootstrap is enqueued by another component of the site. To test that, you can go to Toolset > Settings > General and select the option that says Bootstrap is already loaded on this site. Then test again. You can also test to see if changing the Bootstrap version makes any difference. There are some subtle differences between BS 3 and BS 4 that might be at play here, hard to say offhand but it would be easy to test.

If Bootstrap settings do not resolve the problem, we can try to take Toolset out of the equation to try to determine whether or not it's a Toolset issue. Temporarily deactivate Toolset plugins and enqueue Bootstrap 4 manually in your child theme:
https://scanwp.net/blog/learn-how-to-add-style-and-script-files-to-wordpress-correctly/

Then, place a similar collapsible structure in the HTML content of a custom Page:

<div class="panel-group" id="accordion">
      <div class="panel panel-default">
         <div class="panel-heading">
            <h4 class="panel-title">
               <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Languages</a>
            </h4>
         </div>
         <div id="collapse2" class="panel-collapse collapse show" aria-expanded="false" style="">
            test
         </div>
      </div>
      <div class="panel panel-default">
         <div class="panel-heading">
            <h4 class="panel-title">
               <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Organisations</a>
            </h4>
         </div>
         <div id="collapse3" class="panel-collapse collapse" style="">
            test
         </div>
      </div>
      <div class="panel panel-default">
         <div class="panel-heading">
            <h4 class="panel-title">
               <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Regions</a>
            </h4>
         </div>
         <div id="collapse4" class="panel-collapse collapse" style="">
            test
         </div>
      </div>
   </div>

We can then test to see if the accordion collapses and expands as expected.

[Michael]

I had already worked thru the various options re: Bootstrap loading options in the settings - but have repeated the process with no joy.

I have also deactivated all Toolset elements and added the enqueue function as directed (using most recent Bootstrap 4) with no joy either ..... accordion panels all presented expanded but would not change state.

I am thinking this rules out Toolset as the problem? If not, what next? If Toolset is ok do you know of any resource for getting my head around basic styling of search fields beyond what it offered in standard block options?

[Michael]

Ok, problem has been resolved - was an issue with Divi but would probably be useful for Toolset community to understand the issue.

Basically Bootstrap needs to focus on #'s for their accordion/panels AND Divi uses the same # for their approach to Smooth Scrolling and that was over ridding Bootstrap. Solution was to add a new CSS class to identify Bootstrap expansion elements and a bit of jQuery to exclude those from Smooth Scrolling.

Thanks for the help all the same 🙂

[Michael]

My issue is resolved now. Thank you!