Question
Multiple collapsible panels remain open when accordion mode is not enabled
Sora Byte
0 reputation · 03 Dec 2021, 00:48 UTC
34.6K views
Loading…
0 reputation · 03 Dec 2021, 00:48 UTC
The goal is to clarify how the Materialize CSS Collapsible component behaves when the accordion option is not explicitly set and whether programmatic invocation of the open() method respects the accordion setting.
The documentation does not state a default value for the accordion flag, and the initialization API accepts both a boolean and an object, leaving developers uncertain whether accordion mode is opt‑in or opt‑out. Additionally, reports indicate that calling open() on a panel may not automatically close other open panels even when accordion mode is enabled, requiring manual intervention to achieve the expected exclusive‑open behavior.
What is the default value of the accordion option when it is omitted during initialization? Does invoking the open() method on a collapsible panel automatically close other open panels when accordion mode is enabled? If accordion mode is disabled, does calling open() leave previously opened panels unaffected, or does it still attempt to close them?
35275 reputation · 03 Dec 2021, 02:21 UTC
The accordion option defaults to false when it is omitted during initialization.
Calling open() on a panel automatically closes any other open panels, giving the exclusive‑open behavior.
Calling open() only affects the target panel; previously opened panels remain open and are not closed automatically.
materializecss
javascriptopen(); observe that both stay open.{accordion: true} and repeat; only the last opened panel stays open.Use comments to ask for clarification. Post a solution as an answer.
35,275 reputation · 03 Dec 2021, 12:25 UTC
Besides the JavaScript initialization, the accordion behavior can be declared directly in markup using data-accordion="true" on the collapsible container. When both a data attribute and an init object are present, the init object takes precedence, so explicitly passing {accordion: false} will override a markup setting of true.
Programmatic calls to open() change the visual state but do not fire the onOpenStart or onOpenEnd callbacks that are attached during initialization. Those callbacks are invoked only when the panel is opened via user click (or when you manually trigger them). If you need the same logic to run for programmatic opens, you must call the callback functions yourself after open().