A Pluginoven Test Site
This is a test of the new slide effect for that has been added to Collapse-Pro-Matic version 1.1.6. For this to work on ALL expand elements, simply set the Animation Effect to Directional Slide in Collapse-Pro-Matic options page. To set only a single expand element using the shortcode, the animation_effect attribute set to ‘toggle’: TriggerTarget …
Continue reading “Collapse-Pro-Matic New Slide Effect: Toggle”
Anne asks: Is there a way to use this plugin with image maps? And by ‘this plugin’ she means Collapse-O-Matic. Well, Anne, that’s a good question! Let’s see what we can figure out here. First we need an image with an image map. We’ll pick something easy… like this: The pie is a lie Now …
Here is an example of how to add ‘extra’ sub li’s to a list element using the jedi powers of collapse-o-matic: The basic idea is this: <ul> <li>your thing with a link <ul> <li>this is the super cool extra info</li> </ul> </li> <li>some other thing</li> </ul> So now we just need to add the roll-your-own …
Collapse-O-Matic is a WordPress plugin. But what if you wanted to use it on a static HTML page? Well, that just might work. Step 1: make sure jQuery is installed <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script> Step 2: install collapse.js You will need to download the latest version of Collapse-O-Matic and then find and upload just the collapse.js file. …
Normally, expand elements display the arrow on the left: triggertarget However, we can move the arrow all the way to the right by assigning the the trigger the arrowright class: triggertarget We can move the trigger closer to the text by changing the width of the trigger element using css: CSS .shorty { width: 70px; …
This is a test to see if both an image and text can be used as a trigger. Shortcode: <img src=’https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg’><br/>Trigger TextHidden Target Content Without Text <img src=’https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg’>Hidden Target Content Roll-Your-Own Method With Text <div class=”collapseomatic noarrow” id=”some_id_one” title=”Hover over Trigger Text”><img src=”https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg”/></br>Trigger Text</div> <div id=”target-some_id_one” class=”collapseomatic_content “>Hidden Target Content</div> Trigger Text Hidden Target Content …
Default/Left Arrow: arrow to the left No Arrow: no arrow to be foundthe arrow is not to be found Both Left & Right Arrow: This method requires the extra-trigger feature of Collapse-Pro-Matic and must be built using the roll-your-own method and a bit of css: Magic CSS Place the following css in the collapse-o-matic (or …
This is an example of a form inside an expand element: Click To View Form[[contact-form-7 id=”485″ title=”Contact form 1″]] Here is an example of a expand element inside a form: [[contact-form-7 id=”1504″ title=”Collapse-O-Form”]] [contact-form-7 id=”1504″ title=”Collapse-O-Form”] As you can see, the shortcode does not render inside Contact Form 7. There is a work-around for that …
Shortcode Method Here we use both the swaptitle and swapexcerpt attributes to define the alternate trigger text and excerpt text. Note that the text is immediately replaced with no slide or fade effects. Trigger 1Trigger 2This is the content that will be shown While Trigger 1 is displayedThis is the content that will be shown …
Above and Beyond In this example we simply add the trigpos=”below” to place the trigger below the target area: This is an example of an expand element that has the trigger below the target.Above & Beyond Up Up & Away In this example we will use the roll-your-own method to not only place the trigger …