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>

Leave a Reply

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

Time limit is exhausted. Please reload the CAPTCHA.