Adjustly Collapse

What is it?

Originally developed as a for our own theme, Adjustly 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.

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 and collapse elements when a 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> 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 :

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

Download

  • moldy

    bump, i need this too!

  • Angela Stucky

    Hey PSDCovers, I am trying to add a quick little snippet of Javascript to adjustly-collapse.js that will restrict the expansions so that only one item per page can be expanded at a time. For instance, I’ve got a list and each list item can expand. I would love it if I could make it so that when I click to expand one list item, the other automatically collapses. I know this isn’t super hard, but I just can’t figure out how to add it on to the js that I’ve currently got with aj. Can anyone help?

  • Angela Stucky

    Thank you by the way for responding to this, Simon. It helped a lot.

  • Jubas

    THANK YOU. JUST WHAT I AM LOOKING FOR….Screw the other you are the best!!!!