[Resolved] Tabs and accordions not working with Divi child

[Author]

Posts

[katjaL]

I am trying to create a woocommerce product single layout with tabs or accordion.

I have a Divi child theme and the tabs or accordions don't work. If I use the original Divi, the tabs and accordions work ok. I created a brand new child with child theme configurator, no help, the tabs and accordions don't work on the new child either.

Also the frontend layout of the product single page changes when I use the original DIVI theme: the layout reaches from browser windows edges. While using child theme, there are margins. So it seems it's some kind of wrapping thing.

[Beda]

We cannot assist Child Theme Development, as they are free to add any sort of Custom Code that will be different on each Child Theme.

The borders you mention are most certainly due to either some HTML you added to the Child, or some CSS.
The issue with the Accordions is probably due to missing Bootstrap CSS and JS.

As far I know DIVI does not use Bootstrap, so you would need to head to Toolset > Settings > General > Bootstrap loading and use "Toolset should load Bootstrap 3.0"

If you have trouble with this, I can be of very limited assistance only when it comes to Child themes.
Officially we do not support Custom Theme Coding.

You could thou send me a Copy of your DIVI (original) theme and instruct me how you create a Child Theme.
Usually, this is no problem at all, if you follow the WordPress Codex for Child Themes:
https://codex.wordpress.org/Child_Themes

Please let me know if you can find the HTML/CSS conflicting and if Loading Bootstrap with Layouts/Toolset solves the accordion issue.

Thank you

[katjaL]

Hi Beda, and thank you for replying. I have now tried to make the child theme with 3 different child theme creators with zero modification = the child themes are mere skeletons, not containing anything but the absolutely required things. Now the result is always the same: the accordions and tabs stop working. Perculiar thing is that with the child theme, the layout looks otherwise "right" but the tabs+accordions dont work, and with the divi original theme, the layout looks broken, but the tabs and accordions work. Very weird.

Divi parent is the latest version and Divi does use bootstrap IMHO. Also I have the "Loading Bootstrap" active.

[Beda]

You could thou send me a Copy of your DIVI (original) theme and instruct me how you create a Child Theme.
Usually, this is no problem at all, if you follow the WordPress Codex for Child Themes:
https://codex.wordpress.org/Child_Themes

I will create a Child Theme with the "normal" approach as well, and test this thoroughly.

[Beda]

1. DIVI does definitely not load Bootstrap.
As such, in DIVI original Theme, you need to use "Toolset should load Bootstrap 3.0".

2. I created a Child theme according the Codex:
https://codex.wordpress.org/Child_Themes

This works perfectly fine.
Required files are functions.php and style.css both inside the Child Directory.
Required is that functions.php of the Child has at the very least:

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'divi-style', get_template_directory_uri() . '/style.css' );

}
?>

The style.css at least must have:

/*
 Theme Name:   DIVI Child
 Theme URI:    <em><u>hidden link</u></em>
 Description:  DIVI Child Theme
 Author:       John Doe
 Author URI:   <em><u>hidden link</u></em>
 Template:     divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  <em><u>hidden link</u></em>
 Tags:         any, another
 Text Domain:  divi-child
*/

This works.

3. I cannot assist builds of other Plugins.

4. I checked the Child Theme you provided, and it doesn't work.

==> I then re-enabled my own child theme, and now also that does not work anymore 🙁

5. I could not believe it, re-did all the steps, and it failed again.

So, I cannot tell what is wrong, but it's not working, not even anymore with a proper DIVI Child Theme.

There are no JS errors, and nothing else that would point to the issue.

It works just fine with any other theme.

As such I suspect, there is an issue with the integration of the Theme (DIVI is integrated).

Maybe we do not consider Child Themes, although, the the_content() is properly overwritten by Layouts, perhaps we do not properly enqueue Bootstrap in those cases.
But then, it works on Twenty Seventeen, which is not even integrated right now (unless you use the bridge plugin)

I need some more time on this and will get back at you as soon I have at least a plausible reason on why it's not working with DIVI.

[katjaL]

Ok, thank you.

[Beda]

Well.
Bottom line, what does not work is the Layouts Cells of Accordion and Tabs.
Simple Modals and all other Bootstrap works just fine, BUT you need to enqueue Bootstrap in the Child theme as told here:
https://toolset.com/forums/topic/bootstrap-broken-with-recent-divi-theme-update/#post-336047

Otherwise it will not work.

And even with that, the Layouts accordion and tabs get overwritten by the DIVI Theme rules.
Divi has her own script file, which is minified and it contains everything from BS. Loading external BS doesn’t override it properly. They have some custom patches there, to prevent this.

I am not sure what we can do about this, as it's not directly an issue with Layouts.

What you can do is use the old DIVI integration plugin that we provided - I uploaded this to a Google Drive for you where you can download it.
This is been sent to your email, not here in the forum.

Meanwhile, I will send this to the Developers for review, eventually we have to start a new compatibility process.