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.

Miguel Useche

<p>This plugin provides a widget and a filter to display a collapsible archive list in your sidebar or posts using the JS JS library.</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 your expand/collapse symbol and date format.</li>
<li>Support for archive filters.</li>
<li>Auto expands current/select year from posts.</li>
<li>Select the categories to exclude</li>
<li>Multiple instances support.</li>
<li>Shortcode support  <em>[JsArchiveList]</em></li>
<li>Generates valid HTML code.</li>
<li>Supports multiple languages.</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 bullet.</li>
<li>Effect: Effect to use.</li>
<li>Month Format:  month’s display format of the month.</li>
<li>Expand: when to expand the content of the list.</li>
<li>Hide years from before: older years will be hidden under a  link. To save space in the page on old sites.</li>
<li>Show days inside month list: group posts by day.</li>
<li>Show number of posts: display how many post are published in the year or in the month.</li>
<li>Show only posts from selected category: show only posts from the selected category when visiting a category page.</li>
<li>Only expand/reduce by clicking the symbol: select if animations start when click the link or just the bullet.</li>
<li>Open links in a new tab: opens archive and post links in a new browser tab/window.</li>
<li>Only expand one at the same time: select if you want to have only one expanded at the same time.</li>
<li>Show posts under months:  show post’s title under months.</li>
<li>Show post date next to post title: show post’s date next to post title.</li>
<li>Sort posts by: select how to sort the posts under months.</li>
<li>Include or Exclude categories: Select the categories to include or exclude.</li>
</ul>


JS Archive List

Useful

A JS widget (can be used in posts) for displaying an archive list with some effects.

Adjustly Collapse vs JS Archive List