Month: September
August 2015
October 2015

Posted on

Collapse-Pro-Matic Advanced External Triggers

There are times when it would be nice to turn ANY element into an external trigger for a collapse element. So as of Collapse-Pro-Matic v 1.2.9f we have added:

  • new colomat_trigger class that turns anything into a trigger
  • new external_trigger shortcode element to enter the ids of the elements that should be used as an external trigger
  • new data-external-element attribute that can be used for roll-your-own collapse elements
  • new colomat_expand_only class that prevents the external trigger from collapsing the target, only expand
  • new colomat_collapse_only class that prevents the external trigger from expanding the target, only collapse

And this is how it works:

take any element, make sure it has a unique id and the colomat_trigger class assigned.

<h4 id="funkmaster" class="colomat_trigger">Bootsy</h4>

Bootsy

additional external link can be assigned, and external links that will only expand (not collapse) the target:

<h4 id="flash" class="colomat_trigger colomat_expand_only">Grandmaster Flash</h4>

Grandmaster Flash

Next, assign the ID of the external id (or multiple ids) using the external_trigger attribute:

[expand title="Who has the funk?" external_trigger="funkmaster flash"]You got the funk![/expand]
Who has the funk?
Glory be, baby, you got the funk!

Collapse-Pro-Matic Class Triggers

As of version 1.3.2 of Collapse-Pro-Matic an external trigger can also be assigned to any element using only class names. For example, using a WordPress menu element, where only the classes can be assigned. The following classes must be added to the trigger:

  • collapseomatic
  • noarrow
  • colomatclasstrigger
  • colomatid-[the_target_id]

[expand title="This is the Master Trigger" id="multi-trigger"]

This is the Master Trigger
This is some text that when you click on the trigger you are able to read with your eyes. Well, your eyes are able to see the text, but I guess it’s actually your brain that reads the words and makes sense of them. But jokes on you! There is no sense to be made from these words because they are just pure jibber-jabber.

Links

The following is a link that has an href attribute of “#multi-trigger” and a class of “expandanchor”. Clicking this will scroll-to and expand-only the element.

<a class="expandanchor" href="#multi-trigger">Anchor Link to Multi-Trigger%lt;/a>

Anchor Link to Multi-Trigger

Buttons

Buttons are not links, however if it contains the same href and class values as the link above it will expand-only the target, just not scroll to it.

<button class="expandanchor" href="#multi-trigger">Button to Multi-Trigger</button>

Buttons Wrapped in a Link

This is basically a button that is wrapped in a link described above. Notice that the text link must be clicked, not the button.

<a class="expandanchor" href="#multi-trigger"><button>Anchor Button linked to Multi-Trigger</button></a>

Link Wrapped in a Button

This is a link that is wrapped in a button as described above:

<button><a class="expandanchor" href="#multi-trigger">Button Anchor linked to Multi-Trigger</a></button>

Special Applications: Buttons

Here are a few ordinary buttons, each assigned with a) a unique id, and b) colomat_trigger colomat_expand_only and snap-shut classes like so:

<button id="button_one" class='colomat_trigger colomat_expand_only snap-shut'>Button One</button>

Each button needs to correspond to a target. Normally to create the target it would be part of the trigger but we add the narrow and hidden classes using the trigclass attribute and remove the target padding using the targclass attribute like so:

[expand title="Button 1" external_trigger="button_one" rel="buttons-highlander" trigclass="noarrow hidden" targclass="no_left_margin"]Button One[/expand]

We then added the following CSS under the Custom CSS area of the theme (if available) or the collapse-pro-matic plugin settings:

.hidden {
   display: none;
}
.no_left_margin {
   margin-left: 0;
}
Content One
Content Two
Content Three
Posted on

Escaping Shortcode Examples

Shortcodes

Normally when a shortcode is used, it would trigger the WordPress magic that makes a shortcode a short code:

trigger
content

Now, if we wanted to show what shortcode was used to make that magic happen, we simply need to escape it like so:
[[expand title=”trigger”]content[/expand]]
and that renders:
[expand title="trigger"]content[/expand]

we can even wrap it in a nice code tag to set it apart:
[expand title="trigger"]content[/expand]

so far so good.

HTML

Now lets say we want to escape a bit of HTML! Well, lets first try simply wrapping it in the code tag:

  • item 1
  • item 2
  • item 3

Hmm… no good. All that seems to have done is render the HTML in the special css of a code tag.

What about using Markdown! Let’s wrap the HTML in backticks and see what happens…

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

Perfect! It even added that monospace font that makes code look even more code-like.

Now for the test…

Shortcode and HTML

Since we are using HTML we need to use Markup… what happens when we add in the shortcode?

<ul>
<li>item 1</li>
<li>item 2

trigger
content
</li>
<li>item 3</li>
</ul>

The HTML looks rockin’ but the shortcode… well that was just processed as normal. Hmm… lets try doing the double bracket thing:

<ul>
<li>item 1</li>
<li>item 2 [expand title="trigger"]content[/expand]</li>
<li>item 3</li>
</ul>

Wow! that totally worked. So there you have it: Problem solved!

Posted on

Collapse-O-Matic Partially Highlighted Trigger Text

In this example we will try to make part of the trigger text bit special by highlighting it with a special color or class.

So the first step is to create our special class. Add the following to the plugin option page under custom css:
.whoopie{
color: red;
}

Next, we wrap the part of the trigger text we want highlighted in a span and assign the class. Be sure to use single quotes (‘) if the title element uses double quotes (“):
[expand title="This is <span class='whoopie'>really</span> special"]...[/expand]

The end results looks exactly like so:

This is really special
…and so are you.

This is what happens when you insert the CSS inline:

[expand title="Open: bold  green " swaptitle="Close"]Target Content[/expand]
[expand title="Open: bold" swaptitle="Close"]Target Content[/expand]
Open: bold green
Target Content
Open: bold
Target Content
Posted on

Collapse-O-Matic – Table Test

Various ways the Collapse-O-Matic plugin may be used in conjunction with tables.

Expanding The Entire Table

This is straight forward. We simply wrap a table in an expand element:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr><td>Three</td><td>Four</td></tr>
   </tbody>
</table>
View Table
One Two
Three Four

Expanding A Row

This is a bit more tricky. Notice, what happens when we wrap to wrap a table row in a div:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <div style="border: 1px dotted blue">
         <tr><td>Three</td><td>Four</td></tr>
      </div>
   </tbody>
</table>
One Two
Three Four

Se how the div is rendered outside of the table? To place the div INSIDE of the table, the div needs to be wrapped in td tags like so:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr>
         <td colspan="2">
            <div style="border: 1px dotted blue">
               <table>
                  <tbody>
                     <tr><td>Three</td><td>Four</td></tr>
                  </tbody>
                </table>
            </div>
         </td>
      </tr>
   </tbody>
</table>
One Two
Three Four

Well, now the row we want to use as the target content is inside the table, but as you can see, the inner table is not matching the column layout. So what if we use the table’s TR as the collapse element:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr><td colspan="2" class="collapseomatic" id="singlerow">Trigger</td></tr>
      <tr class="collapseomatic_content" id="target-singlerow">
          <td>Three</td><td>Four</td>
      </tr>
   </tbody>
</table>
One Two
Trigger
Three Four

Perfect! This works well for expanding and collapsing a SINGLE Table Row.

Expanding Multiple Rows

Collapse-O-Matic only allows a trigger to control a single target area. One of the many features of the pro version, Collapse-Pro-Matic is the added ability to have a single trigger control multiple targets. To add extra targets to a trigger, the ID must be in the format of target[n]-id as follows:

<div id="monkey" class="collapseomatic">Trigger</div>
<div id="target1-monkey" class="collapseomatic_content">content</div>
<div id="target2-monkey" class="collapseomatic_content">content</div>

So in our example of the table, we would hook up multiple rows like so:

<table>
   <tbody>
      <tr><td>One</td><td>Two</td></tr>
      <tr><td colspan="2" class="collapseomatic" id="singlerow">Trigger</td></tr>
      <tr class="collapseomatic_content" id="target1-singlerow">
          <td>Three</td><td>Four</td>
      </tr>
      <tr class="collapseomatic_content" id="target2-singlerow">
          <td>Five</td><td>Six</td>
      </tr>
      <tr class="collapseomatic_content" id="target3-singlerow">
          <td>Seven</td><td>Eight</td>
      </tr>
   </tbody>
</table>
One Two
Trigger
Three Four
Five Six
Seven Eight
Posted on

Collapse-O-Matic Snap Close Test

[expand title="The Big Lebowski" trigclass="snap-shut" rel="dude-highlander" tag="h2"]Target Content[/expand] [expand title="Walter" trigclass="snap-shut" rel="dude-highlander" tag="h2"]Target Content[/expand] [expand title="Donny" rel="dude-highlander" tag="h2"]Target Content[/expand]

The Big Lebowski

Target Content

Walter

Target Content

Donny

Target Content
Posted on

Collapse-O-Matic Top & Bottom Trigger Test

This is how to place a trigger at the top and bottom of a expand element:

[expand title="Read more..." swaptitle="Read less..." id="swine"]...content...
<span class="collapseomatic colomat-close" id="bot-swine">Read less...</span>
[/expand]
Read more...
Swine frankfurter non in shoulder. Tri-tip boudin prosciutto pork ball tip elit flank. Incididunt id ex, fugiat cillum turducken andouille sirloin est.
Read less…