Responsive Countdown Test

Here are the responsive countdown styles.

carbonite-responsive

Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
3
Seconds
0
0

cloud-city

Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
4
Seconds
0
2
Years
0
0
Months
0
0
Weeks
0
0
Days
0
0
Hours
0
0
Minutes
0
0
Seconds
0
0

Collapse-O-Matic Left And Right Arrows

Normally, expand elements display the arrow on the left:
[expand title="trigger"]target[/expand]

trigger
target

However, we can move the arrow all the way to the right by assigning the the trigger the arrowright class:
[expand title="trigger" trigclass="arrowright"]target[/expand]

trigger
target

We can move the trigger closer to the text by changing the width of the trigger element using css:

CSS
.shorty {
width: 70px;
}

[expand title="trigger" trigclass="arrowright shorty"]target[/expand]

trigger
target

What if we want both left and right arrows? We first start with a roll-your-own expand element with no arrows by assigning the noarrow class to the trigger:

<div class="collapseomatic noarrow" id="my_double_arrow_01">trigger</div>
<div id="target-my_double_arrow_01" class="collapseomatic_content">target</div>
trigger
target

Then we manually upload the arrows we want to use and place them in the title:

<div class="collapseomatic noarrow" id="my_double_arrow_02"><img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /> trigger <img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /></div>
<div id="target-my_double_arrow_02" class="collapseomatic_content">target</div>
trigger
target

Finally we need to add a swap title element for the close arrows:

<div class="collapseomatic noarrow" id="my_double_arrow_03"><img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /> trigger <img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /></div>
<div id="swap-my_double_arrow_03" alt="" class="colomat-swap" style="display:none;"><img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-up.png" width="12" height="14" /> target <img src="https://spacedonkey.de/wp-content/uploads/2014/10/arrow-up.png" width="12" height="14" /></div>
<div id="target-my_double_arrow_03" class="collapseomatic_content">target</div>
trigger
target