Adjustly Collapse

What is it?

Originally developed as a plugin for our own theme, Adjustly Collapse allows content creators to make any html tag collapsible for the purpose of tucking away non-essential information in their articles due to formatting constraints or other reasons.

THIS PLUGIN IS NO-LONGERĀ SUPPORTED

Minimalist Demo

In an effort to keep things very simple as well as compatible with your existing articles this plugin is bare bones (9 lines of code) and doesn’t require any special shortcodes to invoke it. And as the name implies, it will expand and collapse elements when a trigger is clicked…

Click to expand (again to collapse)

This content is automatically hidden when your article opens and can contain images, video, iframes and more. What you are reading right now is contained within a <div&#62 tag.

Click to collapse (again to expand)

This element is expanded by default but can be collapsed manually.

Requirements

Collapsing content requires two things to function properly, a trigger and a target:

1. Trigger: (click here for details)

The trigger is usually a link tag but can be any tag you want. Assuming the trigger is a link tag, this is how it would look:

<a class="aj-collapse" rel="myslidingcontent">trigger</a>

As the colors suggest, the trigger itself contains 2 specific properties:

  1. class: The trigger must contain the following class, aj-collapse, this is how the plugin knows that this will be the element to trigger the target to expand or collapse.
  2. rel: The trigger, and target, must contain a common rel label. This is how the plugin knows which target belongs to which trigger. If you have multiple triggers and targets on a single page or post, then unique names will be required for each set otherwise the plugin will not know how the multiple triggers and targets are related.

2. Target: (click here for details)

The target is any element you initially want to be collapsed when your page or post opens. The target does not have to be within the trigger or next to the trigger, for example, the trigger can be in your article and the target could be in a sidebar (as long as the trigger and target are both are on the same page).The target is nearly identical in structure to the trigger and looks like this:<div class="aj-hidden" id="myslidingcontent">target</div>

As with the trigger, the target itself contains 2 specific properties:

  1. class: The target must contain either of the following classes, aj-hidden or aj-visible. These two class names have very specific purposes. When aj-hidden is used, your target will appear collapsed and clicking the trigger will expand it. When aj-visible is used the target will be visible when the page loads and clicking the trigger will collapse it.
  2. rel: The trigger, and target, must contain a common rel label. This is how the plugin knows which target belongs to which trigger. If you have multiple triggers and targets on a single page or post, then unique names will be required for each set otherwise the plugin will not know how the multiple triggers and targets are related.

Additional Information

Theme developers can incorporate this plugin into their functions.php file if they need to collapse and expand parts of their theme. Simply activating the plugin will offer designers the same functionality but they may find it easier to ship without a distinctly separate plugin.

For example, using this plugin allows a designer to easily add a collapsible search field or sign-up form at the top of header.php. Or maybe add a collapsing feature to their widgets.

A more complex example would be to make a trigger with an embedded image clickable which would expand details about that image directly over the image itself.

The readme.txt which comes with the plugin has additional examples.

Installation

1. Upload the `adjustly-collapse` directory to the `/wp-content/plugins/` directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress

Download

Specs And Samples

File Format: PSD Action
Type: PSD, Graphics, Covers, Actions
Resolution:
Author:

Comments

Load Comment Section