Accordion Combined
<section class="max-w-4xl mx-auto p-6">
<h2 class="text-2xl font-bold text-center mb-8">Accordion Component Variants</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Basic Accordion -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-4 text-gray-800">Basic Accordion</h3>
<div class="flex flex-col gap-2">
<div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
<button class="w-full bg-gray-50 p-4 font-medium text-gray-800 hover:bg-gray-100 flex justify-between items-center" onclick="toggleBasic(this)">
How do I create an account?
<svg class="w-5 h-5 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="max-h-0 overflow-hidden transition-all duration-300">
<div class="p-4 text-gray-600 text-sm">
<p>Click the "Sign Up" button in the top right corner and follow the registration process.</p>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
<button class="w-full bg-gray-50 p-4 font-medium text-gray-800 hover:bg-gray-100 flex justify-between items-center" onclick="toggleBasic(this)">
I forgot my password. What should I do?
<svg class="w-5 h-5 transform transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="max-h-0 overflow-hidden transition-all duration-300">
<div class="p-4 text-gray-600 text-sm">
<p>Click on "Forgot Password" on the login page and follow the instructions sent to your email.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Arrow Accordion -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-4 text-gray-800">Arrow Accordion</h3>
<div class="flex flex-col gap-2">
<div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
<button class="w-full bg-gray-50 p-4 font-medium text-gray-800 hover:bg-gray-100 flex justify-between items-center" onclick="toggleArrow(this)">
<span>How do I create an account?</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform duration-300" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div class="max-h-0 overflow-hidden transition-all duration-300">
<div class="p-4 text-gray-600 text-sm">
<p>Click the "Sign Up" button in the top right corner and follow the registration process.</p>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
<button class="w-full bg-gray-50 p-4 font-medium text-gray-800 hover:bg-gray-100 flex justify-between items-center" onclick="toggleArrow(this)">
<span>I forgot my password. What should I do?</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform duration-300" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div class="max-h-0 overflow-hidden transition-all duration-300">
<div class="p-4 text-gray-600 text-sm">
<p>Click on "Forgot Password" on the login page and follow the instructions sent to your email.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Plus/Minus Accordion -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-4 text-gray-800">Plus/Minus Accordion</h3>
<div class="flex flex-col gap-2">
<div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
<button class="w-full bg-gray-50 p-4 font-medium text-gray-800 hover:bg-gray-100 flex justify-between items-center" onclick="togglePlus(this)">
<span>How do I create an account?</span>
<div class="relative w-5 h-5">
<!-- Plus/Minus icon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
<!-- Horizontal line (always visible) -->
<rect x="6" y="11" width="12" height="2" fill="currentColor" />
<!-- Vertical line (hidden when expanded) -->
<rect x="11" y="6" width="2" height="12" fill="currentColor" class="plus-vertical transition-opacity duration-300" />
</svg>
</div>
</button>
<div class="max-h-0 overflow-hidden transition-all duration-300">
<div class="p-4 text-gray-600 text-sm">
<p>Click the "Sign Up" button in the top right corner and follow the registration process.</p>
</div>
</div>
</div>
<div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
<button class="w-full bg-gray-50 p-4 font-medium text-gray-800 hover:bg-gray-100 flex justify-between items-center" onclick="togglePlus(this)">
<span>I forgot my password. What should I do?</span>
<div class="relative w-5 h-5">
<!-- Plus/Minus icon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-5 h-5">
<!-- Horizontal line (always visible) -->
<rect x="6" y="11" width="12" height="2" fill="currentColor" />
<!-- Vertical line (hidden when expanded) -->
<rect x="11" y="6" width="2" height="12" fill="currentColor" class="plus-vertical transition-opacity duration-300" />
</svg>
</div>
</button>
<div class="max-h-0 overflow-hidden transition-all duration-300">
<div class="p-4 text-gray-600 text-sm">
<p>Click on "Forgot Password" on the login page and follow the instructions sent to your email.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Joined Accordion -->
<div class="bg-white p-6 rounded-lg shadow-md">
<h3 class="text-lg font-semibold mb-4 text-gray-800">Joined Accordion</h3>
<div class="flex flex-col divide-y divide-gray-200 border border-gray-200 rounded-lg overflow-hidden">
<div class="bg-white overflow-hidden">
<button class="w-full bg-gray-50 p-4 font-medium text-gray-800 hover:bg-gray-100 flex justify-between items-center" onclick="toggleJoined(this)">
<span>How do I create an account?</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform duration-300" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div class="max-h-0 overflow-hidden transition-all duration-300">
<div class="p-4 text-gray-600 text-sm">
<p>Click the "Sign Up" button in the top right corner and follow the registration process.</p>
</div>
</div>
</div>
<div class="bg-white overflow-hidden">
<button class="w-full bg-gray-50 p-4 font-medium text-gray-800 hover:bg-gray-100 flex justify-between items-center" onclick="toggleJoined(this)">
<span>I forgot my password. What should I do?</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform duration-300" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
<div class="max-h-0 overflow-hidden transition-all duration-300">
<div class="p-4 text-gray-600 text-sm">
<p>Click on "Forgot Password" on the login page and follow the instructions sent to your email.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
// Generic toggle function for all accordion variants
function toggleBasic(button) {
const content = button.nextElementSibling;
const icon = button.querySelector('svg');
// Toggle max-height
if (content.style.maxHeight) {
content.style.maxHeight = null;
icon.style.transform = 'rotate(0deg)';
} else {
content.style.maxHeight = content.scrollHeight + "px";
icon.style.transform = 'rotate(180deg)';
}
}
function toggleArrow(button) {
const content = button.nextElementSibling;
const icon = button.querySelector('svg');
// Toggle max-height
if (content.style.maxHeight) {
content.style.maxHeight = null;
icon.style.transform = 'rotate(0deg)';
} else {
content.style.maxHeight = content.scrollHeight + "px";
icon.style.transform = 'rotate(180deg)';
}
}
function togglePlus(button) {
const content = button.nextElementSibling;
const verticalLine = button.querySelector('.plus-vertical');
// Toggle max-height
if (content.style.maxHeight) {
content.style.maxHeight = null;
verticalLine.style.opacity = '1'; // Show vertical line (plus sign)
} else {
content.style.maxHeight = content.scrollHeight + "px";
verticalLine.style.opacity = '0'; // Hide vertical line (minus sign)
}
}
function toggleJoined(button) {
const content = button.nextElementSibling;
const icon = button.querySelector('svg');
// Toggle max-height
if (content.style.maxHeight) {
content.style.maxHeight = null;
icon.style.transform = 'rotate(0deg)';
} else {
content.style.maxHeight = content.scrollHeight + "px";
icon.style.transform = 'rotate(180deg)';
}
}
</script>
Copied to clipboard