Accordion Design for Blogger Wordpress

How to use Accordion for Blogger and Wordpress

An accordion is a systematic information table that shows the information about the topics presented in that specific page that the user is reading at present or in simple words we can understand that it is a FAQ (Frequently Asked Question).

✅ Simple Definition
An accordion is a list of items where each item can expand to show more information and collapse to hide it again.

 
✅ Why it’s called “accordion”?
Because it opens and closes like the musical instrument accordion, which expands and contracts.

 
✅ Where accordions are used?

You see them often in:

• FAQs (Frequently Asked Questions)
• Menus or settings panels
• Product descriptions
• Mobile navigation menus
• Collapsible forms
• Help sections

✅ How it works

An accordion typically has:

Header (title) – user clicks or hovers

Content – text, images, or details that slide open/close

1. Example:

► Question 1
    This is the hidden content.

► Question 2
    More hidden content.

✅ Why use an accordion?

✔ Saves space
✔ Organizes information
✔ Improves user experience
✔ Looks clean and modern

HTML code for Accordion Style

<div class="accordion">
<!--Accordion 1-->
<div class="item c1">
<div class="item-header">
<span>
ACCORDION 1<br />
<span class="sub">ACCORDION 1</span>
</span>
<span class="icon">▼</span>
</div>
<div class="item-content">
<p>ACCORDION 1</p>
</div>
</div>


<!--Accordion 2-->
<div class="item c2">
<div class="item-header">
<span>
ACCORDION 1<br />
<span class="sub">ACCORDION 1</span>
</span>
<span class="icon">▼</span>
</div>
<div class="item-content">
<p>ACCORDION 1</p>
</div>
</div>


<!--Accordion 3-->
<div class="item c3">
<div class="item-header">
<span>
ACCORDION 1<br />
<span class="sub">ACCORDION 1</span>
</span>
<span class="icon">▼</span>
</div>
<div class="item-content">
<p>ACCORDION 1</p>
</div>
</div>
</div>code-box

CSS code for Accordion Style

<style>
.accordion {
width: 100%;
max-width: 720px;
padding: 12px;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Accordion Item */
.item {
background: #fff;
margin: 12px 0;
border-radius: 12px;
overflow: hidden;
border-left: 5px solid transparent;
transition: 0.35s ease;
position: relative;
}

/* Header */
.item-header {
padding: 18px;
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: 0.3s ease;
}

/* Text muted line */
.sub {
font-size: 13px;
opacity: 0.8;
margin-top: 3px;
}

/* Content (smooth slide) */
.item-content {
max-height: 0;
padding: 0 18px;
overflow: hidden;
transition: max-height 0.5s ease;
font-size: 15px;
color: #334155;
}

/* Rotating arrow */
.icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.4s ease;
}

/* Expand on hover */
.item:hover .item-content {
max-height: 200px;
padding-bottom: 18px;
}

.item:hover .icon {
transform: rotate(180deg);
}

/* Colors */
.item.c1:hover {
border-left-color: #3b82f6;
background: #eff6ff;
}

.item.c1:hover .item-header {
color: #1d4ed8;
}

.item.c2:hover {
border-left-color: #10b981;
background: #ecfdf5;
}

.item.c2:hover .item-header {
color: #059669;
}

.item.c3:hover {
border-left-color: #f59e0b;
background: #fffbeb;
}

.item.c3:hover .item-header {
color: #d97706;
}
</style>code-box