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.

Miguel Useche

<p>This plugin provides a widget and a filter to display a collapsible list of categories in your sidebar or posts by using vanilla Javascript.</p>
<h4>Features</h4>
<ol>
<li>Support for Gutenberg blocks. Add it to any FSE theme or Gutenberg compatible theme.</li>
<li>Display a collapsed list of your archives to reduce space.</li>
<li>Uses vanilla JS to add effects and to be compatible with all browsers.</li>
<li>Select the symbol for expanding/collapsing categories</li>
<li>Select categories to exclude, so it shows only the categories you want.</li>
<li>Autoexpand selected category (including it parent or child).</li>
<li>Support for multiple instances.</li>
<li>Simple layout configuration</li>
<li>Shortcode support  <em>[JsCategoriesList]</em></li>
<li>Translated to Spanish, Italian Russian, Slovak, Czech.</li>
<li>Compatible with most JS cache and minify plugins.</li>
<li>And more to come…</li>
</ol>
<h3>Configuration</h3>
<ul>
<li>Title: title of the widget.</li>
<li>Trigger Symbol:  characters to be displayed as a bullet.</li>
<li>Symbol position: where to put the expand/collapse symbol.</li>
<li>Effect: JS’s effect to use.</li>
<li>Order by: display order of categories.</li>
<li>Expand: if list should be expanded or callapsed by default.</li>
<li>Show number of posts: display how many post are published in the category.</li>
<li>Show empty categories: display categories with no posts.</li>
<li>Categories to include: categories to be included from the list.</li>
<li>Categories to exclude: categories to be excluded from the list.</li>
</ul>


JS Categories List Widget

Haven't seen any problems running this with WordPress 4.9.8, even though it's marked as untested for a long time.  It must have been well written.

Works well with 4.9.8

A simple Gutenberg block and JS widget (can be called from posts) for displaying categories in a list with some effects.

Show / Hide Section Block vs JS Categories List Widget