Smarty - Multipurpose + Admin

Standard Toggle

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show Code

<div class="toggle toggle-transparent-body">

	<div class="toggle active">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
		</div>
	</div>

	<div class="toggle">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.</p>
		</div>
	</div>

	<div class="toggle">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
		</div>
	</div>

</div>

Single toggle at a time

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show Code

<div class="toggle toggle-transparent-body toggle-accordion">

	<div class="toggle active">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
		</div>
	</div>

	<div class="toggle">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.</p>
		</div>
	</div>

	<div class="toggle">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
		</div>
	</div>

</div>

Clean Toggle

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show Code

<div class="toggle toggle-transparent toggle-noicon">

	<div class="toggle active">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
		</div>
	</div>

	<div class="toggle">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.</p>
		</div>
	</div>

	<div class="toggle">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
		</div>
	</div>

</div>

Simple Bordered Toggle

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show Code

<div class="toggle toggle-transparent toggle-bordered-simple">

	<div class="toggle active">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
		</div>
	</div>

	<div class="toggle">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.</p>
		</div>
	</div>

	<div class="toggle">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
		</div>
	</div>

</div>

Full Bordered Toggle

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Show Code

<div class="toggle toggle-transparent toggle-bordered-full">

	<div class="toggle active">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
		</div>
	</div>

	<div class="toggle">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.</p>
		</div>
	</div>

	<div class="toggle">
		<label>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		<div class="toggle-content">
			<p>Ut enim massa, sodales tempor convallis et, iaculis ac massa.</p>
		</div>
	</div>

</div>

WHY SMARTY?

RECENTLY VISITED

CONTACT INFO

TOGGLES

Standard Toggle

Single toggle at a time

Clean Toggle

Simple Bordered Toggle

Full Bordered Toggle