JSFiddle - React, Tailwind, and code Playground

by bren

HTML

<header>
     <h1>Accordion with NO JavaScript</h1>

</header>
<div id="header">Title bar</div>
<div id="sidebar">
    <!-- Accordion Captions -->
    <div>
        <label for="acc-1">Accordion 1</label>
        <input id="acc-1" name="accordion-1" type="radio" checked />
        <article id="content-1">
            <p>You have selected Accordion 1</p>
        </article>
    </div>
    <div>
        <label for="acc-2">Accordion 2</label>
        <input id="acc-2" name="accordion-1" type="radio" />
        <article id="content-2">
            <p>You have selected Accordion 2</p>
        </article>
    </div>
    <div>
        <label for="acc-3">Accordion 3</label>
        <input id="acc-3" name="accordion-1" type="radio" />
        <article id="content-3">
            <p>You have selected Accordion 3</p>
        </article>
    </div>
    <div>
        <label for="acc-4">Accordion 4</label>
        <input id="acc-4" name="accordion-1" type="radio" />
        <article id="content-4">
            <p>You have selected Accordion 4</p>
        </article>
    </div>
</div>

CSS

/* Accordion Styles */
 #sidebar {
    background-color: #ccc;
    min-height: 400px;
}
/* Accordion Item Styles */
 input {
    display: none;
}
article {
    overflow: hidden;
    height: 0px;
}
input:checked ~ article {
    height: auto;
}
/* Accordion Content Styles */
 #content-1 > p {
    background-color: seagreen;
    height: 120px;
}
#content-2 > p {
    background-color: greenyellow;
    height: 120px;
}
#content-3 > p {
    background-color: burlywood;
    height: 200px;
}
#content-4 > p {
    background-color: aquamarine;
    height: 120px;
}