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 …

Collapse-O-Matic External Triggers for Nested Element

Here is a nested expand to test this issue. Level 1 Nested Level a1answer a1 Nested Level a2answer a2 Level 2 Nested Level b1answer b1 Nested Level b2answer b2 Here are some external triggers: <a class=”expandanchor” href=”#q1″>Level 1</a> <a class=”expandanchor” href=”#a1″>Level 1a</a> <a class=”expandanchor” href=”#a2″>Level 1b</a> <a class=”expandanchor” href=”#q2″>Level 2</a> <a class=”expandanchor” href=”#b1″>Level 2a</a> <a …

Collapse-O-Matic, Graphene Theme & Any Mobile Switcher Test

First let’s test the mobile-only and mobile-exclude shortcodes to see if they are included with the plugin. No, they are not. Now we install the Graphene Theme and test… Oops, wrong Graphene Theme. It seems This Theme is all that is required for testing the shortcodes. Mobile Only [[mobile only]…[/mobile-only]] [mobile only] this is some …

Collapse-O-Matic CSS Tricks .colomat-close

When an expand element is expanded it has the .colomat-close class assigned. This class is removed when the expand element is collapsed. So, if you want to adjust how an active/expanded trigger is displayed, simply define your custom css as follows: /*inactive/collapsed */ .collapseomatic { } /*active/expanded */ .collapseomatic.colomat-close { } Simple Demo Using the …

Collapse-O-Matic Grouping and Expandall Issues

If we set up two groups for the sole purpose of creating expand/collapse all triggers that will only expand/collapse the related group we currently have to create something like: Science Fiction: Star WarsAlliance to Restore the Republic vs. Galactic Empire <span class=”expandall” rel=”fiction”>Expand All Science Fiction</span> <span class=”collapseall” rel=”fiction”>Collapse All Science Fiction</span> Pure Science: Space …

Collapse-O-Matic – Inline Roll-Your-Own Triggers

This is a follow-up post to Collapse-O-Matic > Line of Trigger Images. This time we want to have the triggers in-line but the content to be displayed below the trigger line. To do this we first must use the roll-your-own method. Triggers: <span class=”collapseomatic” id=”item_one” rel=”item-highlander”>Trigger One</span> <span class=”collapseomatic” id=”item_two” rel=”item-highlander”>Trigger Two</span> <span class=”collapseomatic” id=”item_three” …