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.

Evan Herman

Matthieu S

<p><strong>Video Demo</strong></p>
<p><iframe loading="lazy" title="Expand Collapse Funk WordPress Plugin" width="750" height="422" src="https://www.youtube.com/embed/fiNUqZxFwNA?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p><strong>Feautres</strong></p>
<ol>
<li>Beautifully simple UI</li>
<li>Easy to access custom tinyMCE button</li>
<li>Easily add images and YouTube video to hidden content area</li>
<li>Input direct links to images or YouTube videos</li>
<li>Quick placement of expand+collapse items</li>
<li>Use on pages and posts (or copy and paste the code to use in theme templates)</li>
<li>Use HTML markup inside the hidden content area</li>
<li>Mobile/Responsive Ready</li>
<li>Use in sidebar (inside of a ‘Text’ widget)</li>
<li>SEO friendly hidden content</li>
<li>Great Support</li>
</ol>
<p>If you want to include Expand+Collapse Funk you can use the following code anywhere in your Theme: (remember to swap out the Link and Hidden Content for your content)</p>
<pre><code><div class="exp-col-content-holder"><a class="expand-cnt-link" href="#">This Is The Link To Click</a>
    <div class="hidden-content">
        <p class="hiddenContentp">This is all of your hidden content. This will be invisible at first, but after clicking on the link above this will slide in.</p>
    </div>
</div>
</code></pre>
<p>Using Expand+Collapse Funk allows for very easy placement of collapseable content and a link to reveal the content. The expand and collapse functionality is widely<br />
used across the web to free up space on a page or to place semi-important content into posts, pages or into the sidebar. There is no limit to the length of the collapseable content. Easily include images,<br />
YouTube/Vimeo videos or anything else you could imagine.</p>
<p>I originally built this plugin for the marketing department at my full time job, so a simple UI and ease of use was kept in mind throughout development.</p>
<p>Have an idea, question, concern or found a bug?<a href="http://www.evan-herman.com/contact" rel="nofollow ugc"> Get In Contact With Me!</a></p>


Expand + Collapse Funk

Easily add expand and collapse functionality to any WordPress theme. No coding skills required! Beautifully simple UI. Save space with this plugin for …

Show / Hide Section Block vs Expand + Collapse Funk