Default Behavior

By default, annotations are enclosed within invisible span-tags and can be expanded by clicking a plus-symbol.

Code

This is the simple shortcode: Standard text goes here. Nothing special so far. [btw ]Here's some additional information.[/btw] And again with the standard text. 🙂

Result

Standard text goes here. Nothing special so far. + Here’s some additional information. And again with the standard text. 🙂

Collapsible Codebox

Here’s an example of a codebox formatted as a block element.

Code

Shortcode is as follows: [btw state="expanded" mybuttonclass="btwcodeboxbutton" myannotationclass="btwcodeboxannotation" labelexpanded="Hide CSS code ↑" labelcollapsed="Show CSS code ↓"](Annotation removed to save space)[/btw]

Result

Here’s the result and the CSS styles used in this example:
<style>
.btwcodeboxbutton{
margin-left: 50px;
color: #9fae00;
border: transparent;
background: transparent !important;
display: block;
font-size: 11px;
text-align: left;
font-family: ‘Lato’, ‘Helvetica Neue’, Arial, sans-serif;
}
.btwcodeboxbutton:hover {
color: #FF3513;
background: #eee;
border: 1px solid #eee;
}
.btwcodeboxannotation{
margin-left: 50px;
border: 1px solid #3f3f3f;
display: block;
background: white;
width: 90%;
padding: 5px 0 0 5px;
height:200px;
overflow:auto;
font-family: monospace;
}
</style>