How to Create Accordion using HTML and CSS without JavaScript or jquery

HTML

CSS

Output

HTML Copied

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Create Accordion using HTML and CSS without JavaScript or jQuery</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>

<body>
    <section>
        <h1 class="headingTAg">FAQ section with HTML and CSS only</h1>
        <div class="middle-div">
            <img src="https://www.teknowize.com/attachments/file_1679249472.svg" alt="Logo" class="logo-image">
            <div class="middle-accordation-div">
                <div class="main-lable">
                    <input type="radio" id="accordion1" name="accordion" hidden>
                    <label for="accordion1" class="question-text">
                        <div>Lorem Ipsum is simply dummy text of the printing </div>
                        <div><img src="https://www.teknowize.com/attachments/file_1679249398.svg" alt="Arrow"></div>
                    </label>
                    <div class="answer-div">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer
                    </div>
                </div>
                <div class="main-lable">
                    <input type="radio" id="accordion2" name="accordion" hidden>
                    <label for="accordion2" class="question-text">
                        <div>Lorem Ipsum is simply dummy text of the printing </div>
                        <div><img src="https://www.teknowize.com/attachments/file_1679249398.svg" alt="Arrow"></div>
                    </label>
                    <div class="answer-div">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer
                    </div>
                </div>
                <div class="main-lable">
                    <input type="radio" id="accordion3" name="accordion" hidden>
                    <label for="accordion3" class="question-text">
                        <div>Lorem Ipsum is simply dummy text of the printing </div>
                        <div><img src="https://www.teknowize.com/attachments/file_1679249398.svg" alt="Arrow"></div>
                    </label>
                    <div class="answer-div">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer
                    </div>
                </div>
                <div class="main-lable">
                    <input type="radio" id="accordion4" name="accordion" hidden>
                    <label for="accordion4" class="question-text">
                        <div>Lorem Ipsum is simply dummy text of the printing </div>
                        <div><img src="https://www.teknowize.com/attachments/file_1679249398.svg" alt="Arrow"></div>
                    </label>
                    <div class="answer-div">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
                        the industry's standard dummy text ever since the 1500s, when an unknown printer
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

CSS Copied

*{
    font-family: 'Poppins', sans-serif;
}
.headingTAg{
    font-size: 28px;
    font-weight: 700;
    color: #000;
    text-align: center;
}
.middle-div{
    max-width: 80%;
    background: linear-gradient(180deg, #2400FF 0%, #19FF7B 100%);
border-radius: 20px;
margin: 0 auto;
padding: 35px;
}
.logo-image{
    display:block;
    margin: 0 auto;
}
.middle-accordation-div{
    max-width: 65%;
    margin: 35px auto 0 auto;
}
.main-lable{
    display: block;
    background: #333399;
border: 1px solid #333399;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
border-radius: 5px;
margin-top: 1rem;
}
.question-text{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
font-size: 18px;
color: #FFFFFF;
cursor: pointer;
padding:20px;
}
.answer-div{
margin:0 20px 20px 20px;
padding-top:14px ;
font-weight: 400;
font-size: 18px;
color: #FFFFFF;
border-top: 1px solid #A9BCFF;
display: none;
transition: all 0.25s;
}
.main-lable input:checked ~ .question-text ~ .answer-div{
display: block;
transition: all 0.25s;
}
.main-lable input:not(:checked) ~ .question-text img{
    transform: rotate(0deg);
    transition: all 0.25s;
}
.main-lable input:checked ~ .question-text img{
    transform: rotate(-180deg);
    transition: all 0.25s;
}
@media (max-width:1200px) {
    .middle-accordation-div{
        max-width: 80%;
    }
}
@media (max-width:991px) {
    .middle-accordation-div{
        max-width: 90%;
    }
}
@media (max-width:767px) {
    .middle-accordation-div{
        max-width: 100%;
    }
}
@media (max-width:420px) {
    .middle-div{
        max-width: 100%;
        padding: 15px;
    }
}

How to Create Accordion using HTML and CSS without JavaScript or jQuery

JS Copied

Output