A Pluginoven Test Site
Using the expand shortcode we can create a simple collapse-o-matic accordion element like so: Now, if we wanted to do the same thing but using the roll-your-own method we would have to create the elements manually: Trigger Text Target Content Now, we have the freedom to put the target element whatever we want: before, in …
Continue reading “Collapse-O-Matic – The Roll Your Own Method”
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 …
Continue reading “Collapse-O/Pro-Matic Roll-Your-Own Method Slider Effect and Duration”
This is some text that goes on a bit and then there will be a simply read-more link after this run-on sentence finally ends. It also features a bit more text that is originally hidden, but then pops up when the read-more link is clicked. read moreread less This was done using the following code …
Continue reading “Collase-O-Matic Roll-Your-Own Inline Target Above”
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 …
Continue reading “Collapse-O-Matic – Inline Roll-Your-Own Triggers”
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> …
This is a test where a scroll-to target will open an expand, however will then scroll back to the top of the page–or actually an element at the top of the page defined as:<h2=’top’>Scroll Target at Top<H2> Scroll Target at Top This is just some filler text to move the expand item a bit further …
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 …
Continue reading “Expand/Collapse All Scroll To Current Section Test”
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 …
Continue reading “Collapse-Pro-Matic Roll Your with Scroll To Elements”
[expand title=”Standard Scroll On Close” id=”socstand” scrollonclose=”300″] [expand title=”Internal Scroll To Trigger” id=”socinternal”] <span id=”bot-socinternal” class=”collapseomatic colomat-close scroll-to-trigger”>Collapse</span>
This is a test of the new findme options available with collapse-o-matic. In addition to the values of ‘auto’ and a fixed numeric offset, the findme attributes now supports ‘trigger’ and ‘target’. Target For target to make sense, there would need to be content between the trigger and target. We do this using the roll-your-own …