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="http://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /> trigger <img src="http://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="http://spacedonkey.de/wp-content/uploads/2014/10/arrow-down.png" width="12" height="14" /> trigger <img src="http://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="http://spacedonkey.de/wp-content/uploads/2014/10/arrow-up.png" width="12" height="14" /> target <img src="http://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

Leave a Reply

Your email address will not be published. Required fields are marked *