JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="faq_container">
    <ol>
        <li id="faq1">
             <h2><a href="#faq1">Question 1</a></h2>

            <div>
                <p>Text, relating to question one.</p> <a class="close" href="#hide">close</a>

                <!-- the above link doesn't link to anything, just changes the hash whcih stops the ':target' pseudo-class matching the the current 'div' element -->
            </div>
        </li>
        <li id="faq2">
             <h2><a href="#faq2">Question 2</a></h2>

            <div>
                <p>Different text, which relates to question two.</p> <a class="close" href="#hide">close</a>

            </div>
        </li>
        <li id="faq3">
             <h2><a href="#faq3">Question 3</a></h2>

            <div>
                <p>Yet more text, now with relation to question three.</p> <a class="close" href="#hide">close</a>

            </div>
        </li>
    </ol>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    font-size: 1em;
}
ol, li {
    list-style-type: none;
}
li {
    width: 30%;
    float: left;
    margin: 0 2.5% 0.5em 0;
    border: 1px solid #000;
    position: relative;
}
li 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;
}
li:target div {
    height: 4em;
    -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;
}
li a:link, li a:visited {
    display: block;
    color: #f90;
    font-weight: normal;
    text-decoration: none;
}
li a:hover, li a:active, li a:focus, li:target h2 a {
    font-weight: bold;
    text-decoration: underline;
}
a.close {
    position: absolute;
    opacity: 0;
    bottom: -1px;
    right: -1px;
    width: 0;
    text-align: right;
    background-color: #fff;
    border: 1px solid #fff;
    border-left-color: #000;
    border-top-color: #000;
    border-radius: 0.5em 0 0 0;
    overflow: hidden;
    -moz-transition: all 0.65s linear;
    -ms-transition: all 0.65s linear;
    -o-transition: all 0.65s linear;
    -webkit-transition: all 0.65s linear;
    transition: all 0.65s linear;
}
li:target a.close {
    opacity: 1;
    width: 4em;
    -moz-transition: all 0.65s linear;
    -ms-transition: all 0.65s linear;
    -o-transition: all 0.65s linear;
    -webkit-transition: all 0.65s linear;
    transition: all 0.65s linear;
}