Accordion Example

<aside> 💡

An accordion is a small bar, that when clicked, get’s expanded to show more data. Usually, they are grouped together and only one data is clicked and shown.

</aside>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordion Using HTML And CSS - Easy Tutorials</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul id="accordion">
        <li>
            <label for="first">What is Accordion? <span>&#x3e;</span></label>
            <input type="radio" name="accordion" id="first" checked>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <label for="second">How to Create? <span>&#x3e;</span></label>
            <input type="radio" name="accordion" id="second">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <label for="third">Where to use it? <span>&#x3e;</span></label>
            <input type="radio" name="accordion" id="third">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </li>
    </ul>
</body>
</html>

style.css

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
body {
    background: #07141d
}
#accordion {
    margin: 100px auto;
    width: 600px;
}

#accordion li{
    list-style:none;
    width: 100%;
    margin-bottom: 10px;
    background: #fff;
    padding: 10px;
    border-radius: 4px;
}

#accordion li label {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    color: #c20000
}

#accordion li label span{
    transform: rotate(90deg);
    font-size: 22px;
    color: #333;
}

#accordion label + input[type="radio"]{
    display: none;
}

#accordion .content {
    padding: 0 10px;
    line-height: 26px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
}

#accordion label + input[type="radio"]:checked + .content {
    max-height: 400px;
}