
This modern and stylish accordion is created using only HTML and CSS, featuring smooth transitions and interactive arrows that change direction upon expansion. It’s perfect for enhancing the user experience on your website with an elegant and functional design.
HTML Code for Modern Stylish Accordion
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Accordion</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="accordion-title">Modern Stylish Accordion</h1>
<div class="accordion">
<div class="accordion-item">
<input type="checkbox" id="section1" class="accordion-checkbox">
<label for="section1" class="accordion-header">
Section 1
<span class="arrow"></span>
</label>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget dolor at est ullamcorper sollicitudin.</p>
</div>
</div>
<div class="accordion-item">
<input type="checkbox" id="section2" class="accordion-checkbox">
<label for="section2" class="accordion-header">
Section 2
<span class="arrow"></span>
</label>
<div class="accordion-content">
<p>Donec bibendum turpis et eros vehicula, nec ullamcorper libero lacinia. Vivamus id nisi vel massa auctor consectetur.</p>
</div>
</div>
<div class="accordion-item">
<input type="checkbox" id="section3" class="accordion-checkbox">
<label for="section3" class="accordion-header">
Section 3
<span class="arrow"></span>
</label>
<div class="accordion-content">
<p>Suspendisse potenti. Integer auctor, odio a gravida malesuada, leo nulla facilisis nisi, nec fermentum nunc libero sit amet justo.</p>
</div>
</div>
</div>
</body>
</html>
CSS Code for Modern Stylish Accordion
body {
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f0f0f0;
}
.accordion-title {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
.accordion {
width: 80%;
max-width: 600px;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.accordion-item {
border-bottom: 1px solid #ddd;
}
.accordion-item:last-child {
border-bottom: none;
}
.accordion-checkbox {
display: none;
}
.accordion-header {
background: linear-gradient(135deg, #ff7e5f, #feb47b);
color: white;
padding: 15px;
cursor: pointer;
transition: background 0.3s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.accordion-header:hover {
background: linear-gradient(135deg, #feb47b, #ff7e5f);
}
.arrow {
border: solid white;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 5px;
transition: transform 0.3s ease;
}
.accordion-checkbox + .accordion-header .arrow {
transform: rotate(45deg);
}
.accordion-checkbox:checked + .accordion-header .arrow {
transform: rotate(-135deg);
}
.accordion-content {
background: #fff;
display: none;
padding: 15px;
}
.accordion-content p {
margin: 0;
}
.accordion-checkbox:checked + .accordion-header + .accordion-content {
display: block;
}