Collapse-O-Matic Nested SwapTitles

[expand title="Fiction" rel="fiction" swaptitle="Is like non-non-fiction"]
[expandsub1 title="Star Wars" rel="submenu-highlander" swaptitle="Hyperspeed"]Target Content[/expandsub1]
[expandsub1 title="Star Trek" rel="submenu-highlander" swaptitle="Warpspeed"]Target Content[/expandsub1]
[/expand]
Fiction
Star Wars
Target Content
Star Trek
Target Content

Collapse-O-Matic Grey Bar Style

Here is an example of how to pimp the collapse-o-matic expand to use a grey bar style using CSS.
Be sure you are using the div ad your default tag in the plugin settings.

The CSS:

.greybar {
   border: 1px dotted #aaaaaa;
   padding: 7px;
   background-position: 98% center;
   background-color: #cccccc;
}

The Code:

[expand trigclass="arrowright greybar" title="Monkeys Are Fast"]...[/expand]
Monkeys Are Fast

To give the target content a border, use the targclass attribute:

The CSS:

.blueborder {
   border: 1px dotted blue;
   border-top: none;
   margin-left: 0;
  padding: 5px;
}

The Code:

[expand trigclass="arrowright greybar" targclass="blueborder" title="Monkeys Are Fast"]...[/expand]
Monkeys Are Fast

To add a graphic to the background, simply create a new class and add the appropriate css:

.de_flag {
    background-image: url(https://lipis.github.io/flag-icon-css/flags/4x3/de.svg);
    background-size: 64px 16px;
    background-repeat: no-repeat;
    background-position: -10px center;
    padding: 7px 7px 7px 42px;
}

then add the new class to the trigclass attribute:

[expand trigclass="arrowright greybar de_flag" title="Deutschland"]...[/expand]
Deutschland

Collapse-O-Matic Inline Trigger with Block Target

The roll-your-own method does not work easily, as we have no way of targeting only the expanded state.

<span title="this trigger" class="collapseomatic" id="testme">this trigger</span>
<span class="collapseomatic_content" id="target-testme">hidden content</span>

This is an example of some text that has a trigger placed inline, meaning that the trigger does not break the flow of the text. However, when this triggerhidden content is clicked and the target is expanded, the target would break the paragraph as a display: block element. Naturally, when the element is collapsed, the inline flow returns.

This is an example of some text that has a trigger placed inline, meaning that the trigger does not break the flow of the text. However, when this trigger

hidden content

is clicked and the target is expanded, the target would break the paragraph as a display: block element. Naturally, when the element is collapsed, the inline flow returns.

Peanuts Character 555 95472

555 95472, or 5 for short, debuted in the September 30, 1963, strip, and appeared occasionally until the 1980s. A boy close in age to Charlie Brown and Linus van Pelt, 5 had brown spiky hair, and he wore an orange shirt with the number 5 on it. 5 was given a numerical name by his father, who was upset over the preponderance of numbers in people’s lives; when questioned, 5 clarified that this was not his father’s way of protesting, it was his way of “giving in.” His last name, 95472 (the accent is on the 4), was taken from the family’s ZIP code; it is also the zip code for Sebastopol, California, where Schulz lived at the time.

"5"
“5”