Display an accessible show/hide interface with details and summary elements.
| Author: | Happy Prime (profile at wordpress.org) |
| WordPress version required: | 6.1 |
| WordPress version tested: | 6.2 |
| Plugin version: | 2.0.3 |
| Added to WordPress repository: | 03-03-2023 |
| Last updated: | 28-04-2023 |
| Rating, %: | 0 |
| Rated by: | 0 |
| Plugin URI: | https://wordpress.org/plugins/show-hide-secti... |
| Total downloads: | 841 |
| Active installs: | 70+ |
 Click to start download |
|
Show / Hide Section Block provides two blocks: a Show / Hide Group block that is populated with one or more Show / Hide Section blocks.
The HTML output for an individual section is:
<!-- Each section block has a details element. -->
<details>
<!-- Each details element has a summary and additional, collapsible content. -->
<summary>Summary text</summary>
<!-- Additional inner blocks of any type are populated here. -->
</details>
The HTML output for the group is:
<div>
<details>
<summary></summary>
<!-- Additional blocks to be shown/hidden -->
</details>
<details>
<summary></summary>
<!-- Additional blocks to be shown hidden -->
</details>
<!-- Additional section blocks -->
</div>
An option is provided in the block’s side panel to toggle an “Open all”/”Close all” button. If this is toggled on for a block, an additional <button> element will be inserted and JavaScript will be used on the front-end to control the show/hide behavior of all <details> elements in the group at once.
If the toggle is off, no JavaScript is loaded on the front end.
ChangeLog