Month: July 2021

March 2021

September 2021

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: