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: Targets: The Results: Trigger One Trigger Two Trigger Three Target One Target Two …

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

Expand/Collapse All Scroll To Current Section Test

This is a test using the ew expand_all and collapse_all callbacks to automatically scroll to the section currently being viewed. The issue is that when expand/collapse all is clicked, large amounts of content is suddenly added to–or removed from–the page. This new page length will often re-flow the page, causing the user to loose their …

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

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