JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<!-- Question column -->
<div id="question">
     <div class="views-row views-row-1">
          <div class="question">Question 1 Here!</div>
     </div>
     <div class="views-row views-row-2">
          <div class="question">Question 2 Here!</div>
     </div>
      <div class="views-row views-row-3">
          <div class="question">Question 3 Here!</div>
     </div>
</div>
<!-- Answer column -->
<div id="answer">
     <div class="views-row views-row-1">
          <div class="answer">Answer 1 Here!</div>
     </div>
     <div class="views-row views-row-2">
          <div class="answer">Answer 2 Here!</div>
     </div>
      <div class="views-row views-row-3">
          <div class="answer">Answer 3 Here!</div>
     </div>
</div>

JavaScript

jQuery.fn.fadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle'}, speed, easing, callback);  
};
$(function() {
    $("#answer .views-row").hide();
    $("#question .views-row").click(function(){
        var i = $(this).index();
        $("#answer .views-row").eq(i).fadeToggle("slow").siblings().fadeOut();
    });
});