This is an example of a simple expand element with an excerpt:
[expand title="Trigger Text" excerpt="The excerpt"]Hidden Content[/expand]Trigger Text
The excerpt
Hidden Content
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 excerpt
Trigger Text
Hidden Content
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:
The excerpt
Trigger Text
Hidden Content