Toggle details

Introduction

The base-build includes a custom module to toggle a group <details> elements. This feature allows users to expand and collapse all multiple details with a single click.

This required JavaScript (JS) to work. If the user does not have enabled JS, they will not see the toggle button and will need to expand and collapse each <details> element manually.

Warning

Currently, this feature only supports one toggle button per page.

Instructions

The Toggle details¹ custom module needs to be attached as a library. There are several ways to do this depending on the use case. In this example, adding the Library to my_custom_theme.info.yml will make it globally available to any page using the theme.

libraries:
  - bcbb_other/toggle-details

Adding the button

Add this code where you what the button to appear.

  <button id="bcbb-toggle-details-button" aria-expanded="false">toggle-button</button>

Targeting the list of <details> elements to toggle

The toggle button will affect any <details> element where an ancestor element has the class bcbb-toggle-details-wrapper.

The complete code to toggle <details> will look something like this:

<button id="bcbb-toggle-details-button" class="btn btn-outline-secondary mt-3" aria-expanded="false">toggle-button</button>

<section class="bcbb-toggle-details-wrapper">
  <details>
    <summary>Click for item 1</summary>
      item 1 details
  </details>
  <details>
    <summary>Click for item 2</summary>
      item 2 details
    </details>
</section>

Tip

• You can add your own classes to the button
• The button does not need to be a sibling of the details wrapper, it can be anywhere on the page

1: Toggle details is part of the bcbb_other module.