Skip Navigation

[Resolved] accordioncell every panel stays open after clicking

This thread is resolved. Here is a description of the problem and solution.

Problem:
Keep every accordion cell's panel saty open after clicking on Layouts

Solution:
You need to add custom JS code to achieve this.

Add above code to the same location:
=> Toolset => Layouts CSS and JS => Javascript Editor ta

jQuery(document).ready(function($){
  $('.collapse').collapse({'toggle': false})
 });

Relevant Documentation:
https://toolset.com/documentation/user-guides/accordion-cell/

This support ticket is created 6 years, 4 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
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10: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/Kolkata (GMT+05:30)

This topic contains 6 replies, has 2 voices.

Last updated by a.e.a.m.S 6 years, 4 months ago.

Assisted by: Minesh.

Author
Posts
#1119914

https://toolset.com/documentation/user-guides/accordion-cell/

On the front-end, panels appear one below the other. When clicking on a panel, it expands and all other panels collapse.

But we want that every panel stays open after clicking

#1120470

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Well - to display all panels expanded by default - you should add following JS code at:
=> Toolset => Layouts CSS and JS => Javascript Editor tab

jQuery(document).ready(function($){
    $('.panel-group .panel-collapse').collapse('show');
 });
#1120477

Hi Minesh,

I think you misinterpreted my question, what i meant is that when you want to open for example the first row of the accordeon and then go to the next row of the accordeon to open it, the first row should stay open and not automatically close when the second row opens.

The next question, how can i target the code to a specific accordeon? I have another accordeon on the page that should not be affected by the code.

#1120482

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Ok - I got it.

Please use following code - this will help you to resolve your issue.:

jQuery(document).ready(function($){
  $('.collapse').collapse({'toggle': false})
 });

Add above code to the same location:
=> Toolset => Layouts CSS and JS => Javascript Editor tab

#1120504
Schermafbeelding 2018-10-04 om 09.28.48.png
Schermafbeelding 2018-10-04 om 09.28.55.png

Yes, thats what i want, thanks!

I have 2 accordeons side by side on the page, when i select a row with much content inside it's pushing the other accordeon downwards, showing a large blank space, is it possible to tackle this effect with code?

See example

#1120591

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Well - as your original issue is resolved with the solution shared by me, could you mark this ticket resolved.

I've created another ticket for you we will continue with your new issue there.
=> https://toolset.com/forums/topic/split-accordioncell-every-panel-stays-open-after-clicking-showing-large-space/

#1120594

My issue is resolved now. Thank you!