collapsible panel in Moodle 4 does not work properly

collapsible panel in Moodle 4 does not work properly

โดย Frederik Evans -
Number of replies: 9

I have a plugin with a series of collapsible panels, it works fine in versions 3.10 or 3.11 however, in version 4 it does not. when expanding a panel instead of opening the panel as you would expect, it appears to automatically close the panel of the course. Can someone give me some pointers how to get round with this bug. below is how it appears in 3.10


if i open the first one


however, in Moodle 4 it does some wierd behaviour...it willl close the section, what i would expect to see is that topic 1 section will remain open to expose the expanded panel


การประเมินโดยเฉลี่ย: -
In reply to Frederik Evans

Re: collapsible panel in Moodle 4 does not work properly

โดย Ken Task -
รูปภาพของParticularly helpful Moodlers

Is that Collapsible Topics Format plugin/addon?

this one: https://moodle.org/plugins/format_collapsibletopics/versions

shows compatibility up to 3.9.x of Moodle core.

Guess you could contact maintainer of plugin and inquire about when a 4 version will be available.

'SoS', Ken

การประเมินโดยเฉลี่ย:Useful (1)
In reply to Ken Task

Re: collapsible panel in Moodle 4 does not work properly

โดย Frederik Evans -
No, its a plugin that uses Bootstrap collapsible panels. I think it maybe a problem with bootstrap 4 and moodle 4.
การประเมินโดยเฉลี่ย: -
In reply to Frederik Evans

Re: collapsible panel in Moodle 4 does not work properly

โดย Andrew Lyons -
รูปภาพของCore developers รูปภาพของMoodle HQ รูปภาพของParticularly helpful Moodlers รูปภาพของPeer reviewers รูปภาพของPlugin developers รูปภาพของTesters
Hi Frederik,

Can you show us the source of this plugin? I would guess that something in your code is causing the parent leements to be triggered. Without seeing the code or a live course, we can't give more advice.
การประเมินโดยเฉลี่ย:Useful (1)
In reply to Ken Task

Re: collapsible panel in Moodle 4 does not work properly

โดย Juno Sprite -
My issue was that the menu just wasn't appearing, but for me, Collapsible Topics Format plugin was causing the issue, so I just went to course settings page, and in the "Course format" section, and I changed the Format from "Collapsible Topics format" to "Topics format". That resolved it for me. Now I just have to do that for the other 50 courses....
การประเมินโดยเฉลี่ย: -
In reply to Frederik Evans

Re: collapsible panel in Moodle 4 does not work properly

โดย Justin Hunt -
รูปภาพของParticularly helpful Moodlers รูปภาพของPlugin developers
If you use Jqueryui then it will break the collapsible dock. Jqueryui tabs and accordians are good examples. I went through and removed Jqueryui from all our plugins. And just left it in 1 or 2 places. It was mentioned here: https://tracker.moodle.org/browse/MDL-74459
การประเมินโดยเฉลี่ย: -
In reply to Justin Hunt

Re: collapsible panel in Moodle 4 does not work properly

โดย Marcus Green -
รูปภาพของCore developers รูปภาพของParticularly helpful Moodlers รูปภาพของPlugin developers รูปภาพของTesters
To confirm Justin's comment, JQuery UI can break a lot of things in Moodle 4.0. That is not a criticism Moodle 4.0 as devs have been encouraged away from it for quite a while.
การประเมินโดยเฉลี่ย: -
In reply to Frederik Evans

Re: collapsible panel in Moodle 4 does not work properly

โดย Stefan Hanauska -
รูปภาพของCore developers รูปภาพของPlugin developers
Hi Frederik,

there was a similiar problem with unilabeltype_accordion. Maybe you can use the solution (JS code from line 70):

https://github.com/sh-csg/moodle-unilabeltype_accordion/blob/MOODLE_40_STABLE/templates/accordion.mustache
การประเมินโดยเฉลี่ย: -
In reply to Frederik Evans

Re: collapsible panel in Moodle 4 does not work properly

โดย Andres Montano -

I had a similar problem. Finally figured out that the problem is that there was an external JS that included:

"require(['jquery', 'jqueryui']..."

And that created an annoying JS bug wherever I collapsed various parts of the page.

Similarly to what Justin and Marcus were suggesting, I had to get rid of jquery-ui leaving only "require(['jquery']..." and replacing all jquery-ui calls with native JS or jquery calls. After doing this all collapsable sections worked again.

การประเมินโดยเฉลี่ย:Useful (1)