[Resolved] How to define panel closute in accordeon

[Author]

Posts

[Pat]

Hello,

I'm using Layouts and have selected an accordeon module.
Would it be possible to know how I can manage these 2 needs :
1. Having all panels closed when the page is displayed (just to ensure users to see that there are other panels available - my content is quite long). In standard mode, the first panel is open.
2. When clicking on the header of a panel, when the content is long, the panel that is displayed does not appear from the beginning and we need to scroll up to see the beginning of its content (see this page : previsions-astrologiques in the site I have indicated in this form). I need to ensure that users will see the start of the content as soon as they click on a panel header.

Thanks
Pat

[Luo Yang]

Hello,

Q1) There isn't such kind of built-in feature within Toolset Layouts plugin, the Accordion cell will display the first item by default.
As a workaround, you can use custom JS codes to hide it, for example:

jQuery( document ).ready(function() {
    jQuery('div.collapse.show').removeClass('show');
});

Q2) There isn't such kind of built-in feature too, see Bootstrap document example:
hidden link
Section "Accordion example", you will see the same result as your website.

[Pat]

Hi Luo,

Thanks for your answer.
I have tried it (within the Toolset parameter - add a new code) and the result is that I'm getting an error in the console :
A problem occurred when executing snippet "accordeon". The result of include_once is: ""

Here is the code I have integrated :

<?php
/**
 * New custom code snippet (replace this with snippet description).
 */

toolset_snippet_security_check() or die( 'Direct access is not allowed' );

jQuery( document ).ready(function() {

    jQuery('div.collapse.show').removeClass('show');

});

Regards
Pat

[Luo Yang]

The codes I mentioned above is JS codes, you can put it here:
Dashboard-> Toolset-> Layouts CSS and JS-> JavaScript Editor

[Pat]

Hi Luo,

Of course !
I have done the modification and the accordeon is still open for the first panel !
You can verify at this page : previsions-astrologiques/
Regards
Pat

[Luo Yang]

Please try to modify the JS codes as below:

jQuery( document ).ready(function() {
    jQuery('div.collapse.in').removeClass('in');
});

And test again

[Pat]

Hi Luo,

That's perfect.
Thanks for your help.
Regards
Pat