Problem/Motivation
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.
Steps to reproduce
- Create a layout where with an accordion a small block.
- Open all the accordion elements
- Observe the whole layout shift and all the avoidable scrolling which is needed to reach the last item opened.
Proposed resolution
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:
What I do is provide a wrapper element to group the accordions with a class of .o-accordion-single
. 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: #3273358) has widget functionality.
The following javascript is kept in my theme:
(function (Drupal) {
Drupal.behaviors.[my-theme-name]AccordionSingle = {
attach: function (context, settings) {
var accordionElements = context.querySelectorAll('.o-accordion-single');
accordionElements.forEach(accordion=>{
var summaryElements = accordion.querySelectorAll('summary');
summaryElements.forEach(summary=>{
summary.addEventListener('click', openCloseDetails);
});
function openCloseDetails() {
summaryElements.forEach(summary=>{
let details = summary.parentNode;
if(details !== this.parentNode){
details.removeAttribute('open');
}
});
}
});
}
};
})(Drupal);
...and it seems to just work; even if not as intuitive as it could be.
Remaining tasks
I'm afraid I'm not sure how it would be best to implement it here. But I can say the features needed are:
- 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").
- Javascript to control the behavior.
- Visual indication and controls of the grouping.
User interface changes
- 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"
- A visual indication that they are grouped.
- A way to un-group the group, or remove from a group (thereby switching off the behavior).
- A way to toggle the availability of these options in admin settings.