>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3445267. --> Reported by: [jacobupal](https://www.drupal.org/user/3648607) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>For simple space saving and to aid in focusing the users attention it can be really useful if only one accordion of a group can be open at a time. I have my own solution for this, but it'd be great if this module could provide that functionality more broadly. </p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li>Create a layout where 5+ accordion elements exists in a small block.</li> <li>Open all the accordion elements</li> <li>Observe the whole layout shift and all the avoidable scrolling which is needed to reach the last item opened.</li> </ol> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>I can't quite work out what the best implementation should be within this module, and I don't think my approach will be applicable outside of my use-case - However, maybe explaining what that current approach is, that would be helpful, so here goes:</p> <p>What I do is provide a wrapper element to group the accordions with a class of <code>.o-accordion-single</code>. Editors can place this pre-made group with some placeholder accordions, from within CKEditor using the ckeditor_templates module, a patched version of which (progress here: <a href="https://www.drupal.org/project/ckeditor_templates/issues/3273358">ckeditor_templates#3273358</a>) has widget functionality.</p> <p>The following javascript is kept in my theme:</p> <pre>(function (Drupal) {<br>&nbsp; Drupal.behaviors.[my-theme-name]AccordionSingle = {<br>&nbsp;&nbsp;&nbsp; attach: function (context, settings) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var accordionElements = context.querySelectorAll('.o-accordion-single');<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; accordionElements.forEach(accordion=&gt;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var summaryElements = accordion.querySelectorAll('summary');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; summaryElements.forEach(summary=&gt;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; summary.addEventListener('click', openCloseDetails);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function openCloseDetails() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; summaryElements.forEach(summary=&gt;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; let details = summary.parentNode;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(details !== this.parentNode){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; details.removeAttribute('open');<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<br>&nbsp;&nbsp;&nbsp; }<br>&nbsp; };<br>})(Drupal);</pre><p>...and it seems to just work; even if not as intuitive as it could be.</p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <p>I'm afraid I'm not sure how it would be best to implement it here. But I can say the features needed are:</p> <ul> <li>A way to define to grouped elements used, e.g. instead of a wrapper element like I used, maybe a class could do the work like ".ckeeditor-details-group-A").</li> <li>Javascript to control the behavior.</li> <li>Visual indication and controls of the grouping.</li> </ul> <h3 id="summary-ui-changes">User interface changes</h3> <ul> <li>An intuitive way to group existing accordions (thereby triggering the behavior). - Could be a hovering drop down, e.g. if two groups already exist in the document the drop down could contain "Ungrouped, Start Accordion Group C, Add to Group A, Add to Group B"</li> <li>A visual indication that they are grouped.</li> <li>A way to un-group the group, or remove from a group (thereby switching off the behavior).</li> <li>A way to toggle the availability of these options in admin settings.</li> </ul>