Showhide
Codebase showhides are simple activator components.
On this page:
The Simplest Showhide
Example showhide component content
<div class="showhide">
<button class="showhide-ctrl btn caret-down">Showhide
<div class="showhide-content">Example showhide component content</div>
</div>Note:
The showhide component has no decorative styling of its own. Showhide is exemplified in these docs by adding button styling for the controller, and a yellow background for the content.
The showhide component doesn’t have a caret (indicator triangle) built in. If you need a caret, add it yourself by using .caret-down or .caret-up.
Simply place the .showhide-content block before the toggle in the HTML (i.e. reverse the order of the toggle and the content) and it will be shown and hidden above the toggle.
Example showhide component content
Showhide Classes
| Class | Notes |
|---|---|
.showhide |
The showhide component block |
.showhide-ctrl |
The showhide controller element |
.showhide-content |
The showhide content element |
.caret-down .caret-up |
(Optional) indicative carets1 |
1 Instead of Codebase carets, you could also use something from an icon font or create your own graphic element.
Width: