Categories: archive-pro-matic, collapse-pro-matic
September 2014
November 2014

Posted on

Collapse-Pro-Matic Expand_On Attribute

[expand title="Trigger Text" expand_on="is_search"]Target Text[/expand]

Trigger Text
Target Text

This new conditional expand feature is based on a request by user thisimnot. We introduce a new attribute called expand_on that accepts a comma separated list of WordPress Conditional Tags that will auto-expand the element if true.

For example. The following element should be displayed as collapsed when viewing the front (blog) page, but when viewing the single post or the search results page it will be shown as expanded.

[expand title="Trigger Text" expand_on="is_single, is_search"]Target Text[/expand]

Trigger Text
Target Text

Adding Custom Conditional

To create a custom conditional that checks for a custom query_var, for example, is_hilite:

Step 1: Place the following in your child theme’s function.php file:

//Add query vars
add_filter( 'query_vars', 'my_query_vars' );
function my_query_vars( $qvars ) {
    $qvars[] = 'hilite';
    return $qvars;
}

//Add custom hilite conditional
function is_hilite(){
	if(get_query_var( 'hilite')){
		return true;
	}
	return false;
}

The shortcode:

[expand title="Trigger Text" expand_on="is_hilite"]Target Text[/expand]

Example:

Trigger Text
Target Text

test

Here, at the very bottom of this page is a little collapse element to test the internal WordPress Search.

grapple
It’s both a hook… and a kind of wrestling thing.

Posted on

Collapse-O-Matic Image And Text Trigger

This is a test to see if both an image and text can be used as a trigger.

Shortcode:

[expand title="<img src='https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg'><br/>Trigger Text" trigclass="noarrow"]Hidden Target Content[/expand]

Hidden Target Content

Without Text

[expand title="<img src='https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg'>" trigclass="noarrow"]Hidden Target Content[/expand]

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

Without Text

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" class="collapseomatic noarrow" id="some_id" title="Hover over Trigger Text">
<div id="target-some_id" class="collapseomatic_content ">Hidden Target Content</div>

Hidden Target Content

Roll-Your-Own Image Trigger with Swap Image

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/ninja_turtles.jpg" class="collapseomatic noarrow" id="some_other_id" title="Click to Expand">

<img src="https://spacedonkey.de/wp-content/uploads/2012/09/grillhead.jpg" class="collapseomatic noarrow" style="display:none" id="swap-some_other_id" title="Click to Collapse">

<div id="target-some_other_id" class="collapseomatic_content ">Hidden Target Content</div>

Hidden Target Content
Posted on

Collapse-O-Matic – The Roll Your Own Method

Using the expand shortcode we can create a simple collapse-o-matic accordion element like so:

[expand title="Trigger Text"]Target Content[/expand]
Trigger Text
Target 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

Now, we have the freedom to put the target element whatever we want: before, in or after the Trigger element. For example, here a link has been placed between the target and trigger:

<div class="collapseomatic" id="my_new_id"  title="Trigger Text">Trigger Text</div>
<a href="http://plugins.twinpictures.de/premium-plugins/collapse-pro-matic/">Special Link</a>
<div id="target-my_new_id" class="collapseomatic_content ">Target Content</div>
Trigger Text

Special Link

Target Content

Now if we apply a bit of CSS magic, we can have the trigger and link display inline:

Magic CSS

Place the following css in the collapse-o-matic (or collapse-pro-matic) plugin options page, under Custom Style:

.magic_beans {
   display: inline;
   float: left;
   margin-right: 1.2em;
}

.clear {
   clear: both;
}

Roll-Your-Own Method w/ Magic CSS

<div class="collapseomatic magic_beans" id="my_unique_id"  title="Trigger Text">Trigger Text</div><a href="http://plugins.twinpictures.de/premium-plugins/collapse-pro-matic/" class="magic_beans">Collapse-Pro-Matic</a>
<div id="target-my_unique_id" class="collapseomatic_content clear">Target Content</div>

The Final Result

Trigger Text

Collapse-Pro-Matic

Target Content

Roll-Your-Own Method w/ Images

<img src="https://spacedonkey.de/wp-content/uploads/2016/01/2001_Space_Odysey-300x145.gif" class="collapseomatic noarrow" id="some_id" title="Hover over Trigger Text">
<div class="collapseomatic_content" id="target-some_id" >Target Content</div>

Required components:

  • Trigger:
    • class=”collapseomatic noarrow”
    • id=”some_id”
  • Target:
    • class=”collapseomatic_content”
    • id=”target-some_id”

Demo:

Target Content

Highlander Grouping

Highlander grouping is accomplished by adding data-group=”group_name-highlander” like so:

<div class="collapseomatic" id="monkey" data-group="animal-highlander" title="Monkeys">Monkeys</div>

<div id="target-monkey" class="collapseomatic_content">The monkey says Eek! Eek!</div>

<div class="collapseomatic" id="donkey" data-group="animal-highlander" title="Donkeys">Donkeys</div>

<div id="target-donkey" class="collapseomatic_content">The Donkey says Hee Haw</div>

Demo

Monkeys
The monkey says Eek! Eek!
Donkeys
The Donkey says Hee Haw

Posted on

Annual Archive / Archive-Pro-Matic Shortcode Test

Here are a few tests of the archive pro matic shortcode:

[archives type="daily" limit="5"]
[archives type="weekly" limit="5"]
[archives type="monthly" limit="5"]
[archives type="yearly" limit="5"]
[archives type="yearly" limit="5" show_post_count="true"]
[archives type="decade"]

Archive-Pro-Matic

The post_type and cat_id attributes are available by upgrading to Archive-Pro-Matic

[archives type="yearly" post_type="monkey" limit="5"]
[archives type="yearly" post_type="monkey" limit="5"]
[archives type="yearly" cat_id="4" limit="5"]
Posted on

Collapse-Pro-Matic Setall Expand/Collapse Toggle

This is an example of the expand all/collapse all trigger using the setall trigclass:

[expand title="Expand All" swaptitle="Collapse All" trigclass="setall"/]
[expand title="expand 1"]this is the first expand item[/expand]
[expand title="expand 2"]this is the second expand item[/expand]
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

Now, what if all items where expanded one by one… then we would want the setall trigger to know this and auto switch to the collapse all function. To do this we would need to associate them to the same group using the rel grouping attribute:

[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" rel="my_group"/]
[expand title="expand 1" rel="my_group"]this is the first expand item[/expand]
[expand title="expand 2" rel="my_group"]this is the second expand item[/expand]
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

Group and Toggle Group

[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" group="my_group2"/]
[expand title="expand 1" group="my_group2"]this is the first expand item[/expand]
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
[expand title="Expand All" swaptitle="Collapse All" trigclass="setall" togglegroup="my_group3"/]
[expand title="expand 1" togglegroup="my_group3"]this is the first expand item[/expand]
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

Testing Continues Here and also on this post

Posted on

Collapse-Pro-Matic Expand UP Test

Above and Beyond

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]

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 below the target, but also:

  1. position the target absolutely so that the trigger does not move down
  2. attempt to make the content animate UP from the trigger

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

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.
Up Up & Away