Hi Shaun,
Thank you for waiting, while I performed some tests on your website's clone.
The complexity, in this case, is that the Avada loads its own modified Boostrap resources, which result in conflict with the stock Bootstrap files, which are loaded by the Toolset.
If you'll keep loading the Toolset's Bootstrap files while using Avada, especially the script files, any conflicts that arise will need to be handled on a case-to-case basis. To fix this issue with the "collapse" element, I'll recommend the following steps:
1. Please select "The theme or another plugin is already loading Bootstrap 4" from the Toolset settings.
( WP Admin -> Toolset -> Settings -> "Bootstrap loading" )
This will stop Toolset from loading the default Bootstrap files.
2. For front-end elements, loading only the CSS/styles part from Toolset's default Bootstrap 4 would save you from script conflicts. To do this, you can update the first block in your active theme's "functions.php" file to:
function theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'avada-stylesheet' ) );
wp_enqueue_style( 'toolset_bootstrap_4-css', get_site_url().'/wp-content/plugins/types/vendor/toolset/toolset-common/res/lib/bootstrap4/css/bootstrap.min.css?ver=4.3.1' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
As a result, only CSS and no scripts will be loaded from Toolset's default Bootstrap 4.
3. For active and inactive states of collapsable elements, Avada and Bootstrap 4 uses different class names. To overcome this, you can include the following custom CSS code at WP Admin -> Appearance -> Customize -> Additional CSS:
.collapse.in {
display: block !important;
}
I hope this helps and please let me know how it goes.
regards,
Waqar
