Collapse-O-Matic > Line of Trigger Images

Step One

Create each expand element using the title element as the image tag. Assign it a trigclass=”noarrow” and give it an alt attribute that makes sense:

[expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" tag="div" alt="turtles one"]This is the content of the first image[/expand]

Step Two

Wrap each expand element in a div with a unique class. We used ‘birdwire‘ because it makes all the images nice and need in a row like… birds on a wire! Hmmm, maybe we should have used ducksrow. Anyway, each element will now look like so:

<div class="birdwire">[expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" tag="div" alt="turtles one"]This is the content of the first image[/expand]</div>

Final Step

Add the following to your theme’s style.css:


.birdwire {
display: inline;
float: left;
margin-right: 1.625em;
width: 160px;
}

And Blam-O! The images line up and float left like so:

This is the content of the first image
This is the content of the second image
This is the content of the third image



After you will want to add <div style="clear: both"> </div> to force new content to show up below, fresh in it’s own line.

Highlander Grouping

Now, say you want to add highlander grouping. The code now would look like:
<div class="birdwire">[expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" tag="div" alt="turtles one" rel="ninja-highlander"]This is the content of the first image[/expand]</div>

This is the content of the first image
This is the content of the second image
This is the content of the third image

2 thoughts on “Collapse-O-Matic > Line of Trigger Images”

  1. Hi,

    I searched the blog and could not find the version of this that does not use images. Meaning that I want to have the triggers inline at the top. Then when clicked, the content shows below (not right below the trigger, just below the line of triggers). Can you point me to the right post?

Leave a Reply

Your email address will not be published. Required fields are marked *