Accordion Component Example

17-Jul-2025 blackindia HTML / CSS

HTML Code:

CSS Code:

/* Basic Styles */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.accordion-container {
    width: 80%;
    max-width: 600px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.accordion-item {
    border-bottom: 1px solid #ddd;
}

.accordion-label {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    text-align: left;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    transition: background-color 0.3s, transform 0.3s;
}

.accordion-label:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

.accordion-label::after {
    content: "➤";
    font-size: 20px;
    color: white;
    float: right;
    transition: transform 0.3s;
}

.accordion-content {
    display: none;
    padding: 15px;
    background-color: #f9f9f9;
    font-size: 16px;
    color: #333;
    border-radius: 5px;
}

.accordion-open .accordion-label::after {
    transform: rotate(90deg);
}

.accordion-open .accordion-content {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

JavaScript Code:

Mobile View Tablet View Desktop View

This is a simple accordion design that helps in expanding and collapsing sections of content. Each section can be toggled open or closed by clicking on the section header. This layout is commonly used in FAQs, navigation, and content organization to keep the page clean and user-friendly. The accordion is typically styled with icons (e.g., a “+” or “-” symbol) to show the open or closed state of each section.

Accordion Component Example

This post is for subscribers only

Latest posts

Web Design Counter

CSS Animated Gradient Shadow Box