Print-O-Matic Print Previous Element

The idea behind this feature comes form walpap on this thread.

Well, let’s see what it would take to do this. First we need to have a few paragraphs of text, this being the first. The idea is that after this sentence we will place a print-me shortcode and some funky targeting placeholder that will tell the function to print the element immediately preceding the print button.

Our first idea was to use %prev% as a place holder that sets the target to the element above the print button. We could also define %next% to print the element immediately following a print button.

This is an example of a text block that can be printed by clicking the print button placed at the start of this sentence. Now first lets see what this all looks like when the buttons are placed inline like that. One thing to keep in mind when using next, is the text to print must be placed in an element. For example between two p or span tags.

Collapse-Pro-Matic Improved Expand/Collapse/Toggel All

expand 1
this is the first expand item
expand 2
this is the second expand item
expand 3
this is the third expand item
expand 4
this is the forth expand item
expand 5 my_group
this is the first expand item
expand 6
this is the second expand item
expand 7
this is the third expand item
expand 8
this is the forth expand item

Expand All
Collapse All

Expand All
Expand 5-8
Collapse 5-8
Expand 5-8

Collaspe-O-Matic In Comments

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.

Swapexcerpt Test

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.

[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]

Trigger 1
This is the content that will be shown While Trigger 1 is displayed

Roll-Your-Own Method

Here we define:

  1. Original Trigger Text
  2. Swap Trigger Text
  3. Original Excerpt Text
  4. Swap Excerpt Text

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

Trigger 1
This is the content that will be shown While Trigger 1 is displayed

New Toggle Target Feature: swaptarget

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>

Trigger 1
This is the Content that will be shown while Trigger 2 is displayed
This is the Content that will be shown while Trigger 1 is displayed

Swaptarget Roll-Your-Own Method

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>

Trigger 1
This is the Content that will be shown while Trigger 2 is displayed
This is the Content that will be shown while Trigger 1 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.

New Fixed Height Feature: lockheight

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>

Trigger 1
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.
This is the Content that will be shown while Trigger 1 is displayed.

Collapse-O-Matic Force Collapse Test

Wild Billd
Gun Slinger
James Butler Hickok (May 27, 1837 – August 2, 1876), better known as “Wild Bill” Hickok, was a folk character of the American Old West. Although some of his exploits as reported at the time were fictionalized, his skills as a gunfighter and gambler, along with his reputation as a lawman, provided the basis for his enduring fame. Born and raised on a farm in rural Illinois, Hickok went west at age 18 as a fugitive from justice, first working as a stagecoach driver, then as a lawman in the frontier territories of Kansas and Nebraska. He fought (and spied) for the Union Army during the American Civil War, and gained publicity after the war as a scout, marksman, actor, and professional gambler. Hickok was involved in several notable shootouts. He was shot from behind and killed while playing poker in a saloon in Deadwood, Dakota Territory (now South Dakota) by an unsuccessful gambler. The card hand he held at the time of his death has come to be known today as poker’s “Dead Man’s Hand”.
wild bill
ames Butler Hickok (May 27, 1837 – August 2, 1876), better known as “Wild Bill” Hickok, was a folk character of the American Old West. Although some of his exploits as reported at the time were fictionalized, his skills as a gunfighter and gambler, along with his reputation as a lawman, provided the basis for his enduring fame. Born and raised on a farm in rural Illinois, Hickok went west at age 18 as a fugitive from justice, first working as a stagecoach driver, then as a lawman in the frontier territories of Kansas and Nebraska. He fought (and spied) for the Union Army during the American Civil War, and gained publicity after the war as a scout, marksman, actor, and professional gambler. Hickok was involved in several notable shootouts. He was shot from behind and killed while playing poker in a saloon in Deadwood, Dakota Territory (now South Dakota) by an unsuccessful gambler. The card hand he held at the time of his death has come to be known today as poker’s “Dead Man’s Hand”.

expand all

Collapse-Pro-Matic Global Cookies

As of Collapse-Pro-Matic version 1.0.4 there is a new Global Cookie setting based on this thread by Grant Pax.

Setup

  1. Provide a unique name under Dashboard > Settings > Collapse-Pro-Matic > Global Cookie Name. For this example we will use monkeybucket
  2. provide ONE collapse element that will be used to set the global cookie value. This master trigger element must have the following attributes:
    • cookiename="your_global_cookie_name"
    • trigclass="setall"

    Example:
    [expand title="Expand All" swaptitle="Collapse All" cookiename="monkeybucket" trigclass="setall"/]

Demo

Expand All
expand 1
this is the first expand item
expand 2
this is the second expand item
expand 3
this is the third expand item
expand 4
this is the forth expand item