Toggles

Add Toggles to make your Content shorter than it looks. Great to provide your Site Visitor with an Option to Choose to view your Content.

Code Example

<div class="toggle">
	<div class="toggle-header">
		<div class="toggle-icon">
			<i class="toggle-closed icon-line-plus"></i>
			<i class="toggle-open icon-line-minus"></i>
		</div>
		<div class="toggle-title">
			This is a Toggle Title
		</div>
	</div>
	<div class="toggle-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, dolorum, vero ipsum molestiae minima odio quo voluptate illum excepturi quam cum voluptates doloribus quae nisi tempore necessitatibus dolores ducimus enim libero eaque explicabo suscipit animi at quaerat aliquid ex expedita perspiciatis? Saepe, aperiam, nam unde quas beatae vero vitae nulla.</div>
</div>

Settings

Setting Description
data-state

The Display State of the Toggle.

Option(s): open or closed

Ex: data-state="open"
.toggle-border

Add this Class to the .toggle Element to use Bordered Toggles.

Ex: <div class="toggle toggle-border">
.toggle-bg

Add this Class to the .toggle Element to use Background Colored Toggles.

Ex: <div class="toggle toggle-bg">

Last Modified: May 20, 2021

Need Help?