Category: Uncategorized

June 2022

March 2023

Quick test of all the animation effects with Collapse-O-Matic v 1.8.3:

[expand title="slideToggle" animation_effect="slideToggle" duration="2000"]content[/expand]

[expand title="slideFade" animation_effect="slideFade"]content[/expand]

[expand title="fadeOnly" animation_effect="fadeOnly"]content[/expand]

Testing the use of get_post_type_archive_link to generate archive permalinks for cpts

• 2017
• 2014
• 2012

This is a test on how to handle retroactively applying a collapse-expand feature to any element with a defined class.

The idea is to first have an element with a specific class that holds a heaping amount of content, like the one below:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ok, that’s a lot of text. Now within collapse-pro-matic check for this class, if found append or prepend a trigger and then adjust the target to a defined minimum height.

This is something that would be applied to every element with the defined class, across all posts, future, present and past.

Quick test to demonstrate how to use the tag and css to control the look of a trigger.

The Shortcode

[expand title="trigger" tag="h4"]hidden target content[/expand]

The CSS

h4.collapseomatic {
   color: blue;
}

The Results

trigger

This is an example of a simple expand element with an excerpt:

[expand title="Trigger Text" excerpt="The excerpt"]Hidden Content[/expand]

The excerpt can be repositioned above the trigger by adding excerptpos=”above-trigger” like so:

[expand title="Trigger Text" excerpt="The excerpt" excerptpos="above-trigger"]Hidden Content[/expand]

The following CSS can be used to control the vertical spacing between the three components. So that we don’t adjust all expand elements, the first step is to provide a unique class for each component:

[expand title="Trigger Text" excerpt="The excerpt" excerptpos="above-trigger" trigclass="skinny_trig" excerptclass="skinny_excerpt" targclass="skinny_targ" ]Hidden Content[/expand]

Now each can be controlled using the following css classes:

.skinny_trig {
    border: 1px dotted red;
}
.skinny_excerpt {
    border: 1px dotted green;
}
.skinny_targ {
    border: 1px dotted blue;
}

That results in borders around each:

to make things as compact as possible, we remove the following padding and margins:

.skinny_trig {
    /* border: 1px dotted red; */
    padding: 0 0 0 10px;
    line-height: .9;
}
.skinny_excerpt {
    /* border: 1px dotted green; */
    line-height: .8;
}
.skinny_targ {
    /* border: 1px dotted blue; */
    margin: 0;
    line-height: .8;
}

And the final results are:

This is a test of the new findme options available with collapse-o-matic. In addition to the values of ‘auto’ and a fixed numeric offset, the findme attributes now supports ‘trigger’ and ‘target’.

Target

[expand title="trigger" findme="target"]hidden content[/expand]

For target to make sense, there would need to be content between the trigger and target. We do this using the roll-your-own method:

<div class="collapseomatic find-me" id="my_example" title="trigger text" data-offset="-60" data-findme="target">trigger text</div>

some bulky content. Notice the offset of -60, this is to compensate for the sticky menu element at the top of the page.

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

This is some bulky content… how about a picture of a donkey.

Leo Love and Sex

Leo’s, being of a Fire sign, are heartfelt and passionate, being capable of expressing their feelings effortlessly and with transparency. Toward their beloved they […CLICK TO EXPAND] are giving, respectful, devoted and fun. They are strongly independent and driven, and so will try to be the dominate party of the relationship. The partner of a Leo may grow tired of being domineered, in particular if the Leo imposes their will upon matters that are not of their concern. In order to tolerate the Leo’s strong imposing will, the partner of a Leo needs to be learned and at an equivalent intellect. They also need to be willing to speak up for themselves and to defend their ground, else the blazing Sun of the Leo will scorch their personality. The Leo’s sex life is dynamic, fun and adventurous. They are very aware of the fine line separating love and sex, which can cause them trouble within an established relationship if they too often neglect to show intimacy or connect emotionally with their partner during love making. Ultimately, Leo’s want that their partners peer past their self-centered shell and look deep into their subconscious sensitive core, so as to search out their want of satisfaction resulting from a purposeful relationship. Leo Love Compatibility: Aries, Gemini, Libra, Sagittarius! [CLICK TO HIDE]