JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="faq_container">
    <ol>
        <li>
            <input id="faq1" type="checkbox" name="question" />
             <h2><label for="faq1">Question 1</label></h2>

            <div>
                <div>
                    <p>Text, relating to question one.</p>
                </div>
            </div>
        </li>
        <li>
            <input id="faq2" type="checkbox" name="question" />
             <h2><label for="faq2">Question 2</label></h2>

            <div>
                <div>
                    <p>Different text, which relates to question two.</p>
                </div>
            </div>
        </li>
        <li>
            <input id="faq3" type="checkbox" name="question" />
             <h2><label for="faq3">Question 3</label></h2>

            <div>
                <div>
                    <p>Yet more text, now with relation to question three.</p>
                </div>
            </div>
        </li>
    </ol>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-weight: normal;
}
ol, li {
    list-style-type: none;
}
li {
    width: 30%;
    float: left;
    margin: 0 2.5% 0.5em 0;
    border: 1px solid #000;
}
label {
    display: block;
    cursor: pointer;
}
input[type=checkbox] {
    position: absolute;
    opacity: 0;
    left: -1000px;
}
div input + h2 + div {
    height: 0;
    overflow: hidden;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
div input:checked + h2 + div,
div input:checked ~ div {
    height: 4em;
    overflow-y: auto;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}