Accordions

Famous UI Provides an easiest way to create accordions with less HTML.

NOTE: Do not add any padding or margin to .panel but can customize .panel-box

To remove default styling of an .fui-accordion , simply remove the class .default
from .fui-accordion-container

Example

Default Accordion of Famous UI

accordion 1 - active

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.

accordion 2

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.

accordion 3

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.

Snippet

To keep an accordion open by default add .active class to .fui-accordion 

<!-- single accordion - Active -->
				<div class="fui-accordion-container default">

				<!-- title -->
				<div class="fui-accordion active">accordion 1</div>

				<!-- content -->
				<div class="fui-panel">
					<div class="fui-panel-box">
							<p>Lorem ipsum dolor sit amet.</p>
					</div>
				</div>

				</div>

Custom

Custom accordion using only Famous UI css Framework, without writing any css.

accordion 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo impedit sed eum veniam quibusdam non.

accordion 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur perferendis obcaecati a dolores non nulla ullam accusamus modi dolore unde.

accordion 3

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quae minus, iusto qui maxime error voluptatibus numquam quibusdam dolorum eum, quisquam accusamus debitis doloremque id placeat?



Snippet for Custom accordion
<!-- single accordion - Active -->
				<div class="fui-accordion-container mb-1">
				<h4 class="fui-accordion active p-2 bg-primary text-white flex fj-between mb-0">accordion 1 <i
							class="fa fa-info-circle"></i></h4>
				<div class="fui-panel">
					<div class="fui-panel-box p-2">
							<p class="mb-0">Lorem ipsum dolor sit amet.</p>
					</div>
				</div>
				</div>

				<!-- single accordion -->
				<div class="fui-accordion-container mb-1">
				<h4 class="fui-accordion p-2 bg-primary text-white flex fj-between mb-0">accordion 2 <i class="fa fa-info-circle"></i>
				</h4>
				<div class="fui-panel">
					<div class="fui-panel-box p-2">
							<p class="mb-0">Lorem ipsum dolor sit amet.</p>
					</div>
				</div>
				</div>

				<!-- single accordion -->
				<div class="fui-accordion-container mb-1">
				<h4 class="fui-accordion p-2 bg-primary text-white flex fj-between mb-0">accordion 3 <i class="fa fa-info-circle"></i>
				</h4>
				<div class="fui-panel">
					<div class="fui-panel-box p-2">
							<p class="mb-0">Lorem ipsum dolor sit amet.</p>
					</div>
				</div>
				</div>