JSFiddle - React, Tailwind, and code Playground

by spetnik

HTML

<ul id="faqHelper">
                <li>
                    <span class="questionMark">Q.</span>
                    <a class="questionLine" href="#">What can I do with my online account 1?</a>
                    <div class="answerWrapper">
                        <div class="answerMark">
                            A.
                        </div>
                        <div class="answerLine">
                            <p>Ut putent salutatus mea, zril partiendo intellegat sea cu. Odio volutpat eam et, mel detraxit signiferumque an, no accusamus cotidieque sit. Vim ad assum minim tamquam, suas suscipit ius id. Fabellas antiopam eu est, eos an option impetus volutpat. Ius ne singulis lobortis repudiandae, debitis tincidunt honestatis sit in, no vim delicata consetetur signiferumque. Ex ius aeterno consetetur, ea augue repudiandae contentiones duo.
</p>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="questionMark">Q.</span>
                    <a class="questionLine" href="#">What can I do with my online account 2?</a>
                    <div class="answerWrapper">
                        <div class="answerMark">
                            A.
                        </div>
                        <div class="answerLine">
                            <p>Ut putent salutatus mea, zril partiendo intellegat sea cu. Odio volutpat eam et, mel detraxit signiferumque an, no accusamus cotidieque sit. Vim ad assum minim tamquam, suas suscipit ius id. Fabellas antiopam eu est, eos an option impetus volutpat. Ius ne singulis lobortis repudiandae, debitis tincidunt honestatis sit in, no vim delicata consetetur signiferumque. Ex ius aeterno consetetur, ea augue repudiandae contentiones duo.
</p>
                        </div>
                    </div>                    
                </li>
                <li>
                    <span class="questionMark">Q.</span>
                 ...

CSS

p {
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    line-height:20px;
    margin: 20px 0;
}

li{
    clear: both;
}

.questionMark {
    color:#61b4e8;
    float:left;
    font-size:14px;
    font-weight:bold;
    padding: 4px 20px 4px 0;
}

.questionLine {
    padding: 6px;
    color:#333;
    font-size:14px;
    display:block;
    text-decoration:none;
}

.answerWrapper {
    float:left;
    width:100%;
    display:none;
}

.answerMark {
    float:left;
    width:5%;
    color:#CC0033;
    margin-top:20px;
    font-size:14px;
}

.answerLine {
    float:left;
    width:95%;
}

JavaScript

$(document).ready(function(){
          
        $('.questionLine').click(function(){            
            $(this).next('.answerWrapper').slideToggle('slow')
            return false;
        }); 
        
    });