
Donation Widget with Progress Bar
January 20, 2025
CSS Pagination with Next/Prev Buttons and Dots
February 3, 2025
An accordion is an interactive element that lets you manage content efficiently by expanding and collapsing sections. Used in web and mobile applications to improve readability and save screen real estate.
In an accordion, you can click a section header to open its content and click again to close it. That way only what you need is visible at a time and the rest is hidden until you need it.
Why a status icon?
A status icon in an accordion is a small graphic that visually shows if a section is open or closed. Most common are arrows or symbols like “+” and “-” that change depending on the section state. This visual hint helps users to know which sections are open and which are closed and improves both usability and looks of the interface.
Use cases for accordion with icons
Accordions with icons are good for:
- FAQ sections – to navigate quickly through questions and answers.
- Navigation menus – to save space in complex menu structures.
- Settings panels – to group options into expandable sections to manage app settings.
An accordion with a status icon is functional and looks good, that’s why it’s one of the most used elements in modern UI design.
HTML Structure
<div class="sf-accordion">
<div class="accordion-item active">
<div class="accordion-bar">
<span class="accordion-bar-icon"><i class="fa-regular fa-compass"></i></span>
<h5 class="accordion-heading">Suscipit minima maxime asperiores ad?</h5>
<a class="accordion-icon"><i class="fas fa-plus plus"></i><i class="fas fa-minus minus"></i></a>
</div>
<div class="accordion-content">
<p>Libero cumque expedita beatae omnis iste exercitationem totam nemo suscipit minima maxime asperiores cupiditate ad, necessitatibus laudantium itaque consectetur numquam dolor autem! Veritatis, est cupiditate facilis delectus laboriosam explicabo culpa.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-bar">
<span class="accordion-bar-icon"><i class="fa-regular fa-sun"></i></span>
<h5 class="accordion-heading">Fugit quos reiciendis officiis nemo?</h5>
<a class="accordion-icon"><i class="fas fa-plus plus"></i><i class="fas fa-minus minus"></i></a>
</div>
<div class="accordion-content">
<p>Autem laudantium, velit, enim et perferendis maxime nam facere ullam incidunt labore fugit reiciendis officiis ad voluptatum nemo! Voluptatem, velit! Cumque autem non natus quas qui omnis consequatur. Sit amet velit et voluptatum iste sit rerum incidunt labore fugit reiciendis accusamus et inventore dicta ut quae blanditiis. Est facere debitis aut.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-bar">
<span class="accordion-bar-icon"><i class="fa-solid fa-bicycle"></i></span>
<h5 class="accordion-heading"> Provident eveniet necessitatibus eos error?</h5>
<a class="accordion-icon"><i class="fas fa-plus plus"></i><i class="fas fa-minus minus"></i></a>
</div>
<div class="accordion-content">
<p>Optio, sit, magnam odio numquam dolores soluta error enim quo aliquid assumenda tempore. Magnam, laboriosam excepturi. Provident eveniet necessitatibus dolorum eos error.</p>
</div>
</div>
</div>
Styling the CSS Accordion
/* --------------------- */
/* Snippflow Accordion */
/* --------------------- */
.sf-accordion {
--mfn-accordion-gap: 10px;
--mfn-accordion-item-bg: #fff;
--mfn-accordion-item-border: #e7e8ea;
--mfn-accordion-item-shadow: 0px 0px 8px 0px rgba(0,0,0,.06);
--mfn-accordion-item-radius: 4px;
--mfn-accordion-bar-heading-color: #172029;
--mfn-accordion-bar-icon-size: 20px;
--mfn-accordion-bar-icon-color: #24A47B;
--mfn-accordion-bar-gap: 15px;
--mfn-accordion-icon-width: 24px;
--mfn-accordion-icon-size: 12px;
--mfn-accordion-icon-color: #304050;
--mfn-accordion-icon-bg: rgba(0,0,0,0.05);
--mfn-accordion-hover-item-border: #ccced3;
--mfn-accordion-active-icon-color: #fff;
--mfn-accordion-active-icon-bg: #304050;
}
.sf-accordion { display: flex; flex-direction: column; gap: var(--mfn-accordion-gap); }
.sf-accordion .accordion-item { overflow: hidden; background-color: var(--mfn-accordion-item-bg); border: 1px solid var(--mfn-accordion-item-border); box-shadow: var(--mfn-accordion-item-shadow); border-radius: var(--mfn-accordion-item-radius); transition: transform .2s ease-out; }
.sf-accordion .accordion-item:hover { border-color: var(--mfn-accordion-hover-item-border); }
.sf-accordion .accordion-bar { display: flex; align-items: center; gap: var(--mfn-accordion-bar-gap); cursor: pointer; user-select: none; padding: 20px; }
.sf-accordion .accordion-bar .accordion-heading { font-size: 16px; font-weight: 600; color: var(--mfn-accordion-bar-heading-color); flex: 1; margin-bottom: 0; }
.sf-accordion .accordion-bar .minus { display: none; }
.sf-accordion .accordion-bar-icon,
.sf-accordion .accordion-icon { display: flex; justify-content: center; align-items: center; flex-shrink: 0; line-height: 0; position: relative; }
.sf-accordion .accordion-bar-icon i { font-size: var(--mfn-accordion-bar-icon-size); color: var(--mfn-accordion-bar-icon-color); font-style: normal; }
.sf-accordion .accordion-bar-icon img { width: var(--mfn-accordion-bar-icon-size); }
.sf-accordion .accordion-icon { width: var(--mfn-accordion-icon-width); height: var(--mfn-accordion-icon-width); border-radius: 100%; background-color: var(--mfn-accordion-icon-bg); color: var(--mfn-accordion-icon-color); transition: transform .2s ease-out; }
.sf-accordion .accordion-icon i { font-size: var(--mfn-accordion-icon-size); }
.sf-accordion .accordion-icon img { width: var(--mfn-accordion-icon-size); }
.sf-accordion .accordion-content { display: none; padding: 0 20px 20px 20px; }
.sf-accordion .accordion-content > *:last-child { margin-bottom: 0; }
.sf-accordion .active { border-color: rgba(0,0,0,0); box-shadow: 0 10px 46px 0 rgba(1,7,39,.1); }
.sf-accordion .active .accordion-bar .plus { display: none; }
.sf-accordion .active .accordion-bar .minus { display: block; }
.sf-accordion .active .accordion-icon { color: var(--mfn-accordion-active-icon-color); background-color: var(--mfn-accordion-active-icon-bg); transform: rotate(360deg); }
jQuery:
$(document).ready(function() {
$('.sf-accordion').each(function() {
var accordionContainer = $(this);
accordionContainer.find('.accordion-item').first().addClass('active').find('.accordion-content').slideDown();
accordionContainer.find('.accordion-bar').off('click').on('click', function(event) {
event.preventDefault();
var parentItem = $(this).closest('.accordion-item');
if (parentItem.hasClass('active')) {
return;
}
accordionContainer.find('.accordion-item.active').removeClass('active').find('.accordion-content').stop(true, true).slideUp();
parentItem.addClass('active').find('.accordion-content').stop(true, true).slideDown();
});
});
});
Result
See the Pen Accordion with Expand/Collapse Status Icon by Snippflow (@snippflow) on CodePen.
Summary
An accordion with expand/collapse status icon is a simple and powerful UI element that improves content organization and user experience. The visual status hint helps users to know which sections are open and which are closed, so navigation is faster and more transparent. It’s useful on pages with a lot of content where space and content presentation matters.