Provide only-one-open functionality

Created on 4 May 2024, 7 months ago

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

  1. Create a layout where with an accordion a small block.
  2. Open all the accordion elements
  3. 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.
Feature request
Status

Active

Version

2.1

Component

Miscellaneous

Created by

🇬🇧United Kingdom jacobupal Leeds

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @jacobupal
  • 🇬🇧United Kingdom jacobupal Leeds
  • 🇬🇧United Kingdom jacobupal Leeds
  • 🇳🇱Netherlands shderuiter

    I don't think this is the way to; the details element already has the ability to do this baked in, but the module needs to allow the use of the name attribute; see this MDN article for more info.

  • 🇬🇧United Kingdom jacobupal Leeds

    @shderuiter Nice! I didn't know about that... It definitely would be a better way to do it when writing your own HTML.

    That said, when incorporating it into the editor I don't know how the "name" values should be allocated, or how we would ensure that names are unique to each intended group.

    Perhaps having users choose a name and giving them some instruction when choosing a name would do it, but I do think that'd feel clunky, and far from mistake-proof.

    I also wouldn't be able to insert an identical template for this purpose if the name has to be unique to each group...

Production build 0.71.5 2024