JSFiddle - React, Tailwind, and code Playground

by dmarvs

HTML

<div id="FAQ1"> 
    <a href="#hide1" class="hide" id="hide1">+</a>
    <a href="#show1" class="show" id="show1">-</a>
    <div class="question">Question number 1?</div>
    <div id="FAQ2" class="answer">
        <p>Answer1</p>
    </div>
</div>

<div id="FAQ2"> 
    <a href="#hide1" class="hide" id="hide1">+</a>
    <a href="#show1" class="show" id="show1">-</a>
    <div class="question">Question number 2?</div>
    <div id="FAQ2" class="answer">
        <p>Answer2</p>
    </div>
</div>

CSS

/* show hide list */
 #FAQ1, #FAQ2 {
    vertical-align: top;
    height: auto!important;
    font-style: bold;
}
/*hide answers on load */
 #FAQ1.answer, #FAQ2.answer {
    display: none;
}
/*hide (-) on load */
 #FAQ1 .show, #FAQ2 .show {
    display: none;
}
/*display (-) on click */
 #FAQ1 .hide:target + .show {
    display: inline;
}
#FAQ2 .hide:target + .show {
    display:inline;
}
/*hide (+) on click */
 #FAQ1 .hide:target {
    display: none;
}
#FAQ2 .hide:target {
    display:none;
}
/*show answer*/
 #FAQ1 .hide:target ~ #FAQ1.answer {
    display: inline;
}
#FAQ2 .hide:target ~ #FAQ2.answer {
    display:inline;
}
/*style the (+) and (-) */
 .hide, .show {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 1px 0 #666;
    text-align: center;
    text-decoration: none;
    box-shadow: 1px 1px 2px #000;
    background: #cccbbb;
    opacity: .95;
    margin-right:0;
    float: left;
    margin-bottom: 25px;
}
.hide:hover, .show:hover {
    color: #eee;
    text-shadow: 0 0 1px #666;
    text-decoration: none;
    box-shadow: 0 0 4px #222 inset;
    opacity: 1;
    margin-bottom: 25px;
}
.question {
    position:relative;
    float: left;
    height: auto;
    width: 90%;
    line-height: 20px;
    padding-left: 20px;
    margin-bottom: 25px;
    font-style: italic;
}