JSFiddle - React, Tailwind, and code Playground

HTML

<div class="question" rel="a1-1">What is outfit of choice</div>
<div class="answer" id="a1-1">Outfit of choice can be anything. A costume, dance wear, cheer outfit, western wear ect. During the outfit of choice your child will need to prepare a 30-60 second routine: dance, cheer, sing. Show off for our judges.</div>
<div class="question" rel="a1-2">Question 2</div>
<div class="answer" id="a1-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla nunc justo, lacinia eu, elementum nec, faucibus blandit, massa. Pellentesque nec leo in urna accumsan sodales. Proin nec ligula. Vivamus vestibulum vestibulum neque. Mauris pede. Vivamus ac tortor id mauris hendrerit tincidunt.</div>
<div class="question" rel="a1-3">Question 3</div>
<div class="answer" id="a1-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla nunc justo, lacinia eu, elementum nec, faucibus blandit, massa. Pellentesque nec leo in urna accumsan sodales. Proin nec ligula. Vivamus vestibulum vestibulum neque. Mauris pede. Vivamus ac tortor id mauris hendrerit tincidunt.</div>

CSS

h2            { margin:0 0 8px 0; }
.answer        { line-height:18px; padding:0 0 20px 30px; }
.question      { font-weight:bold; cursor:pointer; line-height:25px; padding:4px 30px; background:url(http://davidwalsh.name/dw-content/help.gif) 2px 7px no-repeat; }
.question:hover  { background-color:lightblue; }

JavaScript

//once the dom is ready

  //hide all answers
  $$('.answer').each(function(el) {
    el.set('display','none');
  });
  //for every question div
  $$('.question').each(function(el) {
    //create a slider
    var slyder = new Fx.Slide(el.get('rel')).hide();
    //click event
    el.addEvent('click', function(e) {
      //toggle!
      e = new Event(e); slyder.toggle(); e.stop();
    });
  });
  //"show" all answers
  $$('.answer').each(function(el) {
    el.set('display','block');
  })'