[Resolved] When I use the accordian block doesn’t collapse properly.

[Author]

Posts

[dennisM-3]

I am trying to: add a accordion block.

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

I expected to see: I expect the accordion tab information to collapse.

Instead, I got: When I collapse the accordion tab, the rest of the page moves up, but the tab information is still visible behind the rest of the page.

[Jamal]

Hello and thank you for contacting the Toolset support.

I am getting a 404 error on the provided URL. Check this screenshot hidden link

Or maybe, I need to login in order to view it. If that's the case, your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[dennisM-3]

Hi Jamal,

I published the page. I'm not sure I know how to make a full back up. Here's the link to the page.

hidden link

[Jamal]

Thank you for your feedback.

Making a backup will depend on your hosting provider. Check this screenshot from a cPanel hosting environment hidden link
If you are unsure, ask your hosting provider to help you or provide the documentation on how to do it.
You can also use a WordPress plugin, such as UpdraftPlus, WP All In One Migration.

Regarding the provided page, It turns out that the required styles, from bootstrap, to implement the accordion are not loaded. I tried on the browser to load Bootstrap 3, but it breaks the design of the theme.
Then, I tried, to include only the styles needed for the Bootstrap accordion, which fixes the issue, but has another issue:

.collapse {
  display: none;
}
.collapse.in {
  display: block;
}

The other issue is, when closing the last open accordion, the section below the accordion jumps to its position before the accordion body content is hidden. This comes from the fact, that Bootstrap is using a delay before hiding the content of the accordion.
This can be fixed by adding the following snippet to your layout Javascript section:

jQuery(function($){
  $.support.transition = false;
})

And add the first CSS snippet to your layout CSS section.

If you still encounter any issues, please allow me temporary access to your website to check this closely. Your next reply will be private to let you share credentials safely.

[dennisM-3]

My issue is resolved now. Thank you!