Skip Navigation

[Resolved] .collapse not working from Bootstrap 4 bundle

This support ticket is created 4 years, 8 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
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 7 replies, has 2 voices.

Last updated by harrietB 4 years, 8 months ago.

Assisted by: Waqar.

Author
Posts
#1337003

I am trying to use the built in navbar with toggler and collapse on .collapse. This is what I get:

TypeError: t is null
bootstrap.bundle.min.js:6:17305
_getParent hidden link
a hidden link
_jQueryInterface hidden link
jQuery 2
each
each
_jQueryInterface hidden link
<anonymous> hidden link
jQuery 2
each
each
<anonymous> hidden link
jQuery 2
dispatch
handle
Source map error: Error: request failed with status 404
Resource URL: hidden link
Source Map URL: bootstrap.bundle.min.js.map

Every time I click on the toggler icon I get the "t is null" followed by a map error. I believe the map may be buggy. Please adjust with an update for Types.
Shaun

#1337393

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Shaun,

Thank you for contacting us and I'd be happy to assist.

The login information that you provided works, however, I'll need to see exactly how the navbar with toggle/collapse was used.

Can you please share a link to a page where this navbar and the script errors can be seen? I'll be in a better position to investigate and report this to the concerned team, accordingly.

regards,
Waqar

#1337669

Hey Waqar,
Links are hidden link and hidden link
Shaun

#1337799

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Shaun,

Thank you for sharing the links.

I've performed some tests on my website with a similar "collapse" element code and noticed that the issue is fixed, if "The theme or another plugin is already loading Bootstrap 4" option is selected at WP Admin -> Toolset -> Settings -> "Bootstrap loading".

The Avada theme loads its own modified version of Bootstrap files. As recommended in our guide on using the Avada theme with Toolset, loading Bootstrap resources through both, can result in similar conflicts:
https://toolset.com/documentation/recommended-themes/toolset-and-avada-theme-layouts-and-custom-templates-without-coding/#managing-bootstrap-issues

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

#1337987

Hey brother,
I have turned off the Fusion compilers in Toolset, as well as turning off the actual CSS and JS compilers manually in Avada's theme settings. Still no luck. I am also loading Bootstrap 4 with Toolset as Avada has not released an update including Bootstrap 4 yet. Their update after the Toolset inclusion of BS4 has only included their front-end, "live", builder.

Please use the same login details as FTP (provided) to log in to my WP backend, hidden link. I am busy adding content and creating pages, but the site is available for you to see why collapse is not working.

I am using the Layouts CSS/JS section for the insertion:

$('.collapse').collapse()

I have also tried wrapping it in a function:

$(function () {
$('.collapse').collapse()
})

No luck, either way.
Shaun

#1338327

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hi Shaun,

Thank you for sharing the update and sorry to learn that the issue still persists.

Can you please share a clone/snapshot of your website, as suggested in this guide?
https://toolset.com/faq/provide-supporters-copy-site/

This will allow me to perform some tests on my own server and suggest the best way forward.

Note: Your next reply will be private.

regards,
Waqar

#1338417
#1339703

Waqar
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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

#1341047

My issue is resolved now. Thank you!

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.