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 thrid image

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>