Collapse-O-Matic ID Tag In Link

A quick example of how to link to—and autoexpand—a collapse-o-matic element on the same page. Key: Assign the link a class of expandanchor like so:

[expand title="question 1" id="q1"]answer 1[/expand]
[expand title="question 2" id="q2"]answer 2[/expand]
[expand title="question 3" id="q3"]answer 3[/expand]
<a class="expandanchor" href="#q1">question 1</a>
<a class="expandanchor" href="#q2" rel="m_PageScroll2id">question 2</a>
<a href="#q3">question 1</a>
question 1
question 2
question 3
question 1
question 2 (page scroll 2 id)
question 3 (no expandanchor class)

Collapse-O-Matic > Highlander & Findme Test

Here are some examples of using the findme and the highlander grouping together:

[expand title="Monkeys" rel="animal-highlander" tag="div" findme="auto"]...[/expand]
[expand title="Donkeys" rel="animal-highlander" tag="div" trigclass="redletter" findme="1200"]...[/expand]
Monkeys
Donkeys
Ninjas
[expand title="This title text is in red, font color='blue'>blue, green, and orange"]Isn't it colourful?[/expand]
This title text is in red, blue, green, and orange
[expand title="Example word" tag="div"]this is a test, nothing to see here.[/expand]
Example word

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:

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>

Grid of Images

In the above examples, the targets are displayed directly below the related triggers. The following example shows how to place a line of image triggers that will display the targets below all images using the roll-your-own method:

The Triggers

<div class="birdwire"> <img id="nj1" src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles-150x150.jpg" class="collapseomatic noarrow" rel="ninjtee-highlander"/> </div> <div class="birdwire"> <img id="nj2" src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles-150x150.jpg" class="collapseomatic noarrow" rel="ninjtee-highlander"/> </div>

The Targets

<div style="clear: both;"> </div>
<div id="target-nj1" class="collapseomatic_content">Target content for first trigger</div>
<div id="target-nj2" class="collapseomatic_content">Target content for second trigger</div>

Collapse-O-Matic > Scroll On Close Test

[expand title="Standard Scroll On Close" id="socstand" scrollonclose="300"]

Standard Scroll On Close

[expand title="Internal Scroll To Trigger" id="socinternal"]
<span id="bot-socinternal" class="collapseomatic colomat-close scroll-to-trigger">Collapse</span>

Internal Scroll To Trigger
Find Me