Posts

Posted on

Strange hasClass Issue

Trigger Text
Target Content
Trigger Text
Target Content
Trigger Text
Target Content
Trigger Text
Target Content
Trigger Text
Target Content
Trigger Text
Target Content
On
Open
Target Content
Posted on

Collapse-O-Matic Multi Triggers & Targets

Multiple Triggers

Add the format extra[n]-id to add extra external triggers for a single target:
<div id="test" class="collapseomatic">Trigger 1</div>
<div id="target-test" class="collapseomatic_content">You might think you can catch a monkey, but you can't. Monkeys are FAST!</div>
<div id="extra1-test" class="collapseomatic">Trigger 2</div>
<div id="extra2-test" class="collapseomatic">Trigger 3</div>

which should produce a little something like:

Trigger 1
You might think you can catch a monkey, but you can’t. Monkeys are FAST!
Trigger 2
Trigger 3

Multiple Targets

Multiple targets are available only in the Collapse-Pro-Matic plugin. To add extra targets, assign the ID in the format of target[n]-id as follows:
<div id="target1-monkey" class="collapseomatic_content">content</div>
<div id="monkey" class="collapseomatic">Trigger</div>
<div id="target2-monkey" class="collapseomatic_content">content</div>

which should produce a little something like:

You might think you can catch a monkey, but you can’t. Monkeys are FAST!
Trigger
You might still think you can catch a monkey, but you really can’t. Monkeys are still FAST!
Posted on

Column-Matic Responsive Test

Column-Matic Shortcode

[[column class="column_left" float=""]Yada yada, spiffy logo image with a funky monkey and a wiffle-ball bat.[/column]]
[[column class="column_right" float=""]Yippy Skippy another logo image with a ding-ding-dong touching tra-la-la.[/column]]
[[end_columns]]

CSS

For normal screens:

.column_left {
    margin-left:0;
    float:left;
    width: 40%;
}
.column_right {
    float: left;
    margin-left: 10px;
    border-left: 1px dotted red;
    padding-left: 10px;
    width: 40%; 
}

For Screens smaller than 450px wide:

@media (max-width: 450px) {
    .column_left, .column_right{
        width: 95%;
        margin: 0 auto;
                padding: 3px;
        clear: both;
        border: none;
    }
}
[column class=”column_left” float=””]Yada yada, spiffy logo image with a funky monkey and a wiffle-ball bat.[/column] [column class=”column_right” float=””]Yippy Skippy another logo image with a ding-ding-dong touching tra-la-la.[/column] [end_columns]
Posted on

Collapse-O-Matic Target Tag & Target Position Test

targtag="span" targpos="inline"
Note: if your theme uses :befor and :after pusdo classes for span we need to assign special classes to remove these.
trigclass="span_fix" targclass="span_fix"

CSS

.my_trigger:hover {
text-decoration: underline;
}
.span_fix {
padding: 0 !important;
margin: 0 !important;
}
.span_fix:before, .span_fix:after {
content:  none;
}

Inline Trigger Text

[expand title="just some text as an in-line trigger" tag="span" targtag="span" targpos="inline" trigclass="my_trigger span_fix noarrow" targclass="span_fix"]...[/expand]

Demo 01:

This is an example of some text with [expand title="just some text as an in-line trigger" tag="span" targtag="span" targpos="inline" trigclass="my_trigger span_fix noarrow" targclass="span_fix"]...[/expand] with some small text at the end.

This is an example of some text with just some text as an in-line trigger with some more text coming after. The Central African jungle? We’ve been there. The tunnels under Sao Paulo where you’ll find some of the world’s best art? Sure. Penguins? We love them – just be careful about that wave that’s about to hit our cinematographer there in the center of that photo. with some small text at the end.

Demo 2:

[expand title="the_title" tag="h4" targtag="span" targpos="inline" targclass="span_fix" excerpt="the_excerpt"]the_content[/expand]

WANT TO HAVE COFFEE?

We come out of an award-winning documentary heritage and decades of global experience. That means intellectual curiosity and rigor. It also means we know how get anywhere, anytime, and have the expertise to never miss a moment.<span id="target-id662abbcf3c7ff" class="collapseomatic_content_inline colomat-inline span_fix"> The Central African jungle? We’ve been there. The tunnels under Sao Paulo where you’ll find some of the world’s best art? Sure. Penguins? We love them – just be careful about that wave that’s about to hit our cinematographer there in the center of that photo.</p> <p>Now new camera technology is helping us push the creative possibilities far past the documentary. Never before were the world’s best cameras also the most portable. Today we can do things we only dreamed of doing just a few years ago. And our dreams are epic.</span>
Posted on

Collapse-O-Matic ID Tag In Link

A quick example of how to link to—and autoexpand—a collapse-o-matic element on the same page. Key: Assign the link a class of expandanchor like so:

[expand title="question 1" id="q1"]answer 1[/expand]
[expand title="question 2" id="q2"]answer 2[/expand]
[expand title="question 3" id="q3"]answer 3[/expand]
<a class="expandanchor" href="#q1">question 1</a>
<a class="expandanchor" href="#q2" rel="m_PageScroll2id">question 2</a>
<a href="#q3">question 1</a>
question 1
answer 1
question 2
answer 2
question 3
answer 3
question 1
question 2 (page scroll 2 id)
question 3 (no expandanchor class)