Season: Summer 2014

In this example we will try to make part of the trigger text bit special by highlighting it with a special color or class.

So the first step is to create our special class. Add the following to the plugin option page under custom css:
.whoopie{
color: red;
}

Next, we wrap the part of the trigger text we want highlighted in a span and assign the class. Be sure to use single quotes (‘) if the title element uses double quotes (“):
[expand title="This is <span class='whoopie'>really</span> special"]...[/expand]

The end results looks exactly like so:

This is what happens when you insert the CSS inline:

[expand title="Open: bold  green " swaptitle="Close"]Target Content[/expand]
[expand title="Open: bold" swaptitle="Close"]Target Content[/expand]

This test will use both highlander grouping and cookies. The end result should be that every time a visitor returns to the page, the existing expand/collapse state is recalled.

[expand title="Monkey" rel="animal-highlander" cookiename="monkey"]Target Content[/expand] [expand title="Donkey" rel="animal-highlander" cookiename="donkey"]Target Content[/expand] [expand title="Sasquatch" rel="animal-highlander" cookiename="sasquatch"]Target Content[/expand]

when an item is expanded it is assigned a class of:
colomat-close

We can then expand this class with css to do things like change the font color:

.colomat-close{
color: red;
}