JSFiddle - React, Tailwind, and code Playground

by aanred

HTML

<ul class="quiznav">
     <li class="btn">Q1</li>
     <li class="btn">Q2</li>
     <li class="btn">Q3</li>
</ul>

<div class="span9">
    <div id="Q1">
    <div class="qnstitle" name="qns1">Q1. Lorem ipsum dolor sit amet</div>
    <label class="radio">
        <input name="qns1" class="radioBtn" type="radio" value="A">a) asdf
    </label>
    <div class="resp" data-qns="qns1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet ligula mi. Aenean eu magna quam. In ultrices nisi non tellus molestie ut mattis turpis convallis. </p>
    </div>

    <label class="radio">
        <input name="qns1" class="radioBtn" type="radio" value="B">b) bsdf
    </label>
    <div class="resp" data-qns="qns1">
        <p>Proin porta, ante eu feugiat facilisis, nulla erat porta dui, sed pellentesque orci sapien quis libero. Nam nec nibh metus, nec luctus massa.</p>
    </div>

    <label class="radio">
        <input name="qns1" class="radioBtn" type="radio" value="C">c) csdf
    </label>
    <div class="resp" data-qns="qns1">
        <p>Donec metus nibh, pharetra vitae semper id, blandit non lorem. Fusce ut metus a dui egestas congue quis quis augue. Suspendisse sed nunc sed nulla volutpat pharetra at vel purus.</p>
    </div>

    </div>
    <div id="Q2">
    <div class="qnstitle" name="qns2">Q2. Nunc sed aliquet enim.</div>
    <label class="radio">
        <input name="qns2" class="radioBtn" type="radio" value="A">a) azzzddsaf
    </label>
    <div class="resp" data-qns="qns2">
        <p>Donec metus nibh, pharetra vitae semper id, blandit non lorem.</p>
    </div>

    <label class="radio">
        <input name="qns2" class="radioBtn" type="radio" value="B">b) bzzzzddafdsf
    </label>
    <div class="resp" data-qns="qns2">
        <p>Aenean eu metus id dui tristique aliquam. Pellentesque non scelerisque nisi. Integer a nibh orci</p>
    </div>

    <label class="radio">
        <input name="qns2" class="radioBtn" type="radio" value="C">c)...

CSS

#Q1, #Q2, #Q3 {
    display: none;
} 

.btn {
    background: rgba(0,0,0,0.2);
    width: 100px;
    text-align: center;
    margin: 3px;
    cursor: pointer;
}

.btn:hover {
    background: rgba(255,0,0,0.2);
}

JavaScript

$(".btn").click(function(){
    $("#" + $(this).text()).toggle("fast");
});