Accordion

<div class="accordion">
    <div class="togglebox">
        <input id="toggle1" type="radio" name="toggle" />
        <label for="toggle1">Is it small?</label>
        <section id="content1">
            <p>Yes. It doesn't require any additional libraries, frameworks, or JavaScript files.</p>
        </section>
    </div>
    <div class="togglebox">
        <input id="toggle2" type="radio" name="toggle" />
        <label for="toggle2">Is it reliable?</label>
        <section id="content2">
            <p>Yes. Works well on all browsers, as it relies on fundamental CSS features. Also, it will function even if JavaScript is disabled or not supported.</p>
        </section>
    </div>
    <div class="togglebox">
        <input id="toggle3" type="radio" name="toggle" />
        <label for="toggle3">Is it customizable?</label>
        <section id="content3">
            <p>Yes, it is highly customizable. Developers can easily adjust colors, spacing, and animations.</p>
        </section>
    </div>
</div>
                                

.accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1rem 0;
}

.togglebox {
    border-bottom: 1px solid gray;
    cursor: pointer;
}

input[type='radio'] {
    position: absolute;
    opacity: 0;
}

label {
    position: relative;
    display: block;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 400;
    text-align: left;
    color: white;
    padding: 1rem 0;
}

.togglebox p {
    color: white;
}

section {
    height: 0;
    transition: 0.3s all;
    overflow: hidden;
}

#toggle1:checked ~ #content1,
#toggle2:checked ~ #content2,
#toggle3:checked ~ #content3 {
    height: calc(15vh - 7vw);
}