Above and Beyond
In this example we simply add the trigpos=”below” to place the trigger below the target area:
[expand id="aboveandbeyond" title="Above & Beyond" trigpos="below"]This is an example of an expand element that has the trigger below the target.[/expand]
Up Up & Away
In this example we will use the roll-your-own method to not only place the trigger below the target, but also:
- position the target absolutely so that the trigger does not move down
- attempt to make the content animate UP from the trigger
HTML
<div id="absolute">
<div id="target-upaway" class="collapseomatic_content">This is an example of an expand element that will "Slide Up" on top of the trigger when expanded and "Slide Down" into the trigger when collapsed.</div>
<div id="upaway" class="collapseomatic">Up Up & Away</div>
</div>
Notice that we have wrapped both the target and trigger elements in a div that has been assigned the id of “absolute”. We give this wrapping div absolute positioning and anchor it so many pixels off the bottom of the page using the following CSS:
CSS
#absolute {
position: absolute;
bottom: 60px;
padding-bottom:2%;
z-index: 100;
}