Ned Zimmerman

<p>This plugin adds a Gutenberg block which provides <code><details></code> with an optional <code><summary></code>.</p>
<p>
What does that look like?<br />
Why, just like this!
</p>
<p>
Why did you make it?<br />
I wanted to try making a Gutenberg block, and I read <a href="https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/" rel="nofollow ugc">this article</a> last week.
</p>
<p><em>This project was bootstrapped with <a href="https://github.com/ahmadawais/create-guten-block" rel="nofollow ugc">Create Guten Block</a>.</em></p>


Summary & Details

Simple plugin, but works great. I prefer to add just the blocks I need instead of large plugins with loads of functions I won't need. This plugin fits well in that filosofy and lets you customize the apearance within the theme css.

Very usefull

This plugin adds a Gutenberg block which provides with an optional.

Jeremy Felt

Happy Prime

slocker

philcable

<p>Show / Hide Section Block provides four blocks that are used to display a group of <code><details></code> elements that each contain a <code><summary></code> and an arbitrary number of additional blocks.</p>
<ul>
<li>The Show Hide Group block is a wrapping <code><div></code>.</li>
<li>The Show Hide Section block is a wrapping <code><details></code>. One or more of these blocks is added to a Show Hide Group block.</li>
<li>The Show Hide Summary block contains the content for a <code><summary></code> tag. One of these blocks is inside each Show Hide Section block.</li>
<li>The Show Hide Details block contains arbitrary content. One of these blocks is added inside each Show Hide Section block.</li>
</ul>
<p>The HTML output for an individual section is:</p>
<pre><code>
<details class="wp-block-happyprime-show-hide-section">
    
    <summary class="wp-block-happyprime-show-hide-summary">Summary text</summary>
    
</details>
</code></pre>
<p>The HTML output for the group is:</p>
<pre><code><div class="wp-block-happyprime-show-hide-group">
    
    <button class="toggle-all" aria-expanded="false">Open all</button>
    <details class="wp-block-happyprime-show-hide-section">
        <summary class="wp-block-happyprime-show-hide-summary"></summary>
        
    </details>
    <details class="wp-block-happyprime-show-hide-section">
        <summary class="wp-block-happyprime-show-hide-summary"></summary>
        
    </details>
    
</div>
</code></pre>
<p>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 <code><button></code> element will be inserted and JavaScript will be used on the front-end to control the show/hide behavior of all <code><details></code> elements in the group at once.</p>
<p>If the toggle is off, no JavaScript is loaded on the front end and only the browser’s default behavior is used for opening and closing <code><details></code> elements.</p>

Show / Hide Section Block

Display an accessible show/hide interface with details and summary elements.

Summary & Details vs Show / Hide Section Block