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.

PSDCovers

<p>Developed internally for our Adjustly theme, this plugin allows authors to link 2 html elements together as trigger and target.  When the trigger is clicked the target will immediately expand to reveal its content.</p>
<h4>Try the Demo</h4>
<p>If you’re interested in seeing what a default installation of Adjustly Collapse has to offer, have a look at some samples on our site.</p>
<p><a href="http://www.psdcovers.com/adjustly-collapse/" rel="nofollow ugc">http://www.psdcovers.com/adjustly-collapse/</a></p>
<h4>Usage</h4>
<p>The basic structure without any CSS bells and whistles looks like this:</p>
<pre><code><a class="aj-collapse" rel="myslidingcontent">trigger</a>
<div class="aj-hidden" id="myslidingcontent">target: this content is hidden by default</div>
</code></pre>
<p>In the example above, the trigger is an href element and the target is a div element.  Note that the target can be any element you choose.</p>
<h4>rel=”[id]”</h4>
<p>Each trigger and target pair must contain a common label so that the trigger knows which target to expand or collapse. The trigger rel tag must be the same name as the target’s id tag.  If you plan on having multiple collapsible elements in a page, post or theme then you will need to ensure that the rel and id tags are always unique for each trigger/target combo.</p>
<h4>Class Names</h4>
<ol>
<li>The trigger must always have the following class name: class=”aj-collapse”</li>
<li>The target can have either of 2 classes: class=”aj-hidden” will make the target collapsed by default while class=”aj-visible” will display the content normally but allow the viewer to collapse it.</li>
</ol>
<h4>Notes</h4>
<p>The trigger and target do not have to be next to each other.  The target can be at the opposite end of the article or you can place it within the trigger. Theme developers can use it to make widgets collapsible.</p>


Adjustly Collapse

Developed internally for our Adjustly theme, this plugin allows authors to link 2 html elements together as trigger and target.

Show / Hide Section Block vs Adjustly Collapse