A Pluginoven Test Site
This is a test using the Collapse-Pro-Matic / Collapse-O-Matic plugin in the comments area.
1. Does the shortcode work in the comments? Probably not by default. Let’s see.
[expand title="Read More"]This is the expanded text of the comment. I have a good feeling this will not be allowed by default.[/expand]
Nope.
2. Does the shortcode work when the following is added to the functions.php file?
add_filter( 'comment_text', 'do_shortcode' );
Yes is does.
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.
[expand title="Trigger 1" swaptitle="Trigger 2" excerpt="This is the content that will be shown While Trigger 1 is displayed" swapexcerpt="This is the content that will be shown While Trigger 2 is displayed" trigclass="noarrow"][/expand]
Here we define:
<div class="collapseomatic noarrow" id="some_unique_id" title="Trigger 1">Trigger 1</div>
<div id='swap-some_unique_id' style='display:none;'>Trigger 2</div>
<div id="excerpt-some_unique_id" class="collapseomatic_excerpt ">This is the content that will be shown While Trigger 1 is displayed</div>
<div id="swapexcerpt-some_unique_id" style="display:none;">This is the content that will be shown While Trigger 2 is displayed</div>
Now for a new feature that allows us to use a single trigger with a swaptitle that toggles between two targets. This first example will use both the shortcode and a bit of roll-your-own trickery.
1. create the initial expand element with a unique id and a swaptitle:
[expand id="bert" title="Trigger 1" swaptitle="Trigger 2" trigclass="noarrow"]This is the Content that will be shown while Trigger 2 is displayed[/expand]
2. create second target area and assign it an id of swaptarget-name_of_first_target. also it must have a class of both collapseomatic_content and colomat_close:
<div id="swaptarget-bert" class="collapseomatic_content colomat_close">This is the Content that will be shown while Trigger 1 is displayed</div>
This final example is how you could accomplish the same as above using only the roll-your-own method:
<div class="collapseomatic noarrow" id="ernie" title="Trigger 1">Trigger 1</div>
<div id='swap-ernie' style='display:none;'>Trigger 2</div>
<div id="target-ernie" class="collapseomatic_content ">This is the Content that will be shown while Trigger 2 is displayed</div>
<div id="swaptarget-ernie" class="collapseomatic_content colomat_close">This is the Content that will be shown while Trigger 1 is displayed</div>
Here we have the ability to lock the height of the largest target div so as we toggle between targets the height stays fixed. This is accomplished by wrapping the target divs in a lockheight div as follows:
<div class="collapseomatic noarrow" id="bigbird" title="Trigger 1">Trigger 1</div>
<div id='swap-bigbird' style='display:none;'>Trigger 2</div>
<div id="lockheight-bigbird">
<div id="target-bigbird" class="collapseomatic_content ">This is the Content that will be shown while Trigger 2 is displayed. This will have a bit more content than the toggled version simply because we want to test a method that prevents the content below from bouncing up and down with the toggle. One idea would be to wrap this in a Div and give it a fixed height. Let's start here and see what we can do.</div>
<div id="swaptarget-bigbird" class="collapseomatic_content colomat_close">This is the Content that will be shown while Trigger 1 is displayed.</div>
</div>
In this example we simply add the trigpos=”below” to place the trigger below the target area:
[expand id="aboveandbeyond" title="Above & Beyond" trigpos="below"]This is an example of an expand element that has the trigger below the target.[/expand]
In this example we will use the roll-your-own method to not only place the trigger below the target, but also:
HTML
<div id="absolute">
<div id="target-upaway" class="collapseomatic_content">This is an example of an expand element that will "Slide Up" on top of the trigger when expanded and "Slide Down" into the trigger when collapsed.</div>
<div id="upaway" class="collapseomatic">Up Up & Away</div>
</div>
Notice that we have wrapped both the target and trigger elements in a div that has been assigned the id of “absolute”. We give this wrapping div absolute positioning and anchor it so many pixels off the bottom of the page using the following CSS:
CSS
#absolute {
position: absolute;
bottom: 60px;
padding-bottom:2%;
z-index: 100;
}
[tminus cid="1036" style="carbonite" omitweeks="false"/]
This is a Dr. Frankenstein experiment with Contact Form 7’s Submit button and the Print-O-Matic Print button. In theory, when submitting this form, the form should also also force-launch the print dialogue. Years of working in UI tells us NOT do this, but hey, people still have music playing on page load, so what do we know.
[[contact-form-7 id="1018" title="SubPrint"/]]
To cross-breed the Submit button with the print-o-matic print trigger, use the roll-your-own method as follows:
[submit id:subprint class:printomatic]
manually insert a hidden input that has the ID of “target-
<input type="hidden" id="target-subprint" value=".wpcf7-form" />
be sure the ‘Shortcode Loads Scripts’ checkbox is NOT checked in the plugins options page.
Update: This is no longer supported in the current version of print-o-matic. Here is how to implement this solution with print-pro-matic.
This is a 360º spin with a transparent .png thumbnail image.
embed code:
<iframe src="http://send2scan.com/spin.php?sid=1755" frameborder="0" width="300" height="200" scrolling="no" webkitallowfullscreen mozallowfullscreen allowfullscreen>
As of Collapse-Pro-Matic version 1.0.4 there is a new Global Cookie setting based on this thread by Grant Pax.
monkeybucketcookiename="your_global_cookie_name"trigclass="setall"Example:
[expand title="Expand All" swaptitle="Collapse All" cookiename="monkeybucket" trigclass="setall"/]