JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
    </head>
<body id="home">
    <div class="main">
        <br />
        <div id="homecolone">
            <br style="clear:both" />
            <h1></h1>
            <div id="faqColumn">
                <div id="A1-link-div" class="question">
                    <a id="A1-link-a" href="javascript://" class="questionLink" onClick="ToggleFAQ('A1');">Does someone have to learn JQuery completely? </a>
                </div>
                <div id="A1" style="display:none;">
                    <div class="answer">
                        <div class="indent-box">
                            No, in fact learn it on the fly.
                        </div>
                    </div>
                </div>
                <div id="A2-link-div" class="question">
                    <a id="A2-link-a" href="javascript://" class="questionLink" onClick="ToggleFAQ('A2');">What should I concentrate more on? JavaScript or CSS</a>
                </div>
                <div  id="A2" style="display:none;">
                    <div class="answer">
                        <div class="indent-box">
                            CSS should come first.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>    
</html>

CSS

* {
    margin: 0;
    padding: 0;
}
html, input {
    font-family: Arial,"Times New Roman";
    font-size: 62.5%;
}
h3 {
    border-bottom: 2px solid #619c50;
    color: #619c50;
    margin: 10px 0 0;
}
h1 {
    color: #FF0000;
    font-family: Arial;
    font-size: 2.7em;
}
h2 {
    color: #619c50;
    font-family: Helvetica;
    font-size: 2em;
}
body {
    background-color:silver;
    text-align: center;
}
.main {
    border: 0 solid #000000;
    margin: 0 auto;
    text-align: left;
    width: 880px;
}
em {
    font-size: 150%;
}
#homecolone {
    float: left;
    margin: -5px 0 0 9px;
    padding: 0;
    width: 570px;
}
#faqColumn {
    background-color: #E4EAEF;
    padding: 10px;
}
.answer {
    background-color: #F9FBFC;
    padding: 2px 5px 0;
    width: 525px;
}
.questionLink {
    color: #0C2A55;
    font-size: 1.2em;
    font-weight: bold;
}
.questionLink-clicked {
    color: #0C2A55;
    font-size: 1.2em;
    font-weight: bold;
}
.question {
    margin-top: 10px;
    padding: 2px 5px 0;
    width: 525px;
}
.question-clicked {
    background-color: #CCCCCC;
    color: #0C2A55;
    margin-top: 10px;
    padding: 2px 5px 0;
    width: 525px;
}
.indent-box {
    padding: 5px;
}

JavaScript

function ToggleFAQ(Ans)
{
    Aobj = document.getElementById(Ans);
    DIVobj = document.getElementById(Ans + "-link-div");
    LINKobj = document.getElementById(Ans + "-link-a");
 
    current_state = Aobj.style.display;
 
    if(current_state != "inline")
    {
        Aobj.style.display = "inline";
        Aobj.style.visibility = "visible";
        DIVobj.className = "question-clicked";
        LINKobj.className = "questionLink-clicked";
    }
    else
    {
        Aobj.style.display = "none";
        Aobj.style.visibility = "hidden";
        DIVobj.className = "question";
        LINKobj.className = "questionLink";
    }
}