Modern Accordion - MeggiTools

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Accordion</title>
<style>
body {
font-family: 'Roboto', Arial, sans-serif;
background-color: #fafafa;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.accordion {
width: 400px;
background-color: #688be1;
color: #fff;
border-radius: 6px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
overflow: hidden;
}
.accordion-item {
border-bottom: 1px solid #4169e1;
}
.accordion-title {
padding: 15px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 18px;
font-weight: bold;
color: #fff;
}
.accordion-content {
padding: 15px;
display: none;
font-size: 16px;
color: #fff;
}
.accordion-title.active {
background-color: #4169e1;
}
.accordion-title.active .accordion-icon {
transform: rotate(180deg);
}
.accordion-icon {
transition: transform 0.3s ease;
}
.accordion-title:hover {
background-color: #4169e1;
}
</style>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">
Section 1 <span class="accordion-icon">▶</span>
</div>
<div class="accordion-content">
Content of section 1 goes here.
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
Section 2 <span class="accordion-icon">▶</span>
</div>
<div class="accordion-content">
Content of section 2 goes here.
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
Section 3 <span class="accordion-icon">▶</span>
</div>
<div class="accordion-content">
Content of section 3 goes here.
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const accordionItems = document.querySelectorAll('.accordion-item');
accordionItems.forEach(item => {
const title = item.querySelector('.accordion-title');
const content = item.querySelector('.accordion-content');
title.addEventListener('click', () => {
title.classList.toggle('active');
if (title.classList.contains('active')) {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
});
});
</script>
</body>
</html>