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
Default Accordion of Famous UI
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.
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 accordion using only Famous UI css Framework, without writing any css.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo impedit sed eum veniam quibusdam non.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur perferendis obcaecati a dolores non nulla ullam accusamus modi dolore unde.
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?
<!-- 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>