Collapse-O-Matic – The Roll Your Own Method

Using the expand shortcode we can create a simple collapse-o-matic accordion element like so: Trigger TextTarget Content Now, if we wanted to do the same thing but using the roll-your-own method we would have to create the elements manually: <div class=”collapseomatic ” id=”my_id” title=”Trigger Text”>Trigger Text</div> <div id=”target-my_id” class=”collapseomatic_content “>Target Content</div> Trigger Text Target Content …

Collapse-O/Pro-Matic Roll-Your-Own Method Slider Effect and Duration

Roll-Your-Own Method We have already demonstrated how the new animation_effect and duration attributes work with a shortcode. Now we will show the same example but using the roll-your-own method. As always, the default effect is slideFade and duration is fast, but these can be overwritten globally in the plugin settings. As of version 1.7.3 these …

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” …

Roll-Your-Own Nested Expands

Here is a simple example of how you can create nested expand elements using the shortcode: state1 city1bar1 bar2 city2bar3 bar4 Roll-Your-Own Here is a similar example of nested expand elements using the Roll-Your-Own method: <div class=”collapseomatic” id=”state2″ title=”state2″>state2</div> <div id=”target-state2″ class=”collapseomatic_content ” style=”display: none;”> <div class=”collapseomatic” id=”city3″ title=”city3″>city3</div><div id=”target-city3″ class=”collapseomatic_content ” style=”display: none;”>bar5<br> bar6</div> …

Collapse-Pro-Matic Roll Your with Scroll Too Elements

The roll-your-own method has already been documented, however, what if you wanted to create your own sroll-to targets for each element? How can we do this with roll-your-own? First we create an example using the shortcode: trigger texthidden content Now we re-create that using the roll-your own elements: The Trigger <div class=”collapseomatic find-me” id=”my_example” title=”trigger …

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/Pro-Matic Slider Effect and Duration Attributes

Currently the slide effect and duration can be set globally under the plugin settings, but what if we want to set it individually per collapse element? We need the ability to add this via a shortcode attribute and as a data attribute for the roll-your-own method. Shortcode Attributes Default animation_effect is slideFade and duration is …

Nested Collapse Elements with Highlander Grouping

Here is a typical nested collapse group with highlander grouping: state1 city1bar1 bar2 city2bar3 bar4 state2 city3bar5 bar6 city4bar7 bar8 Notice how the main level and nested sub-elements have their own highlander grouping defined. This makes it so the main level items do not affect the nested children expand/collapse states. This is how it works: …