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">
<div class="item" id="question1">
<div class="tophead">How do you skin a cat?</div>
    <div class="bottomhead">by Gerald, 1 hour ago <span class="allopener highlighti">open/close</span> <span>all answers below</span>
<div class="answers">

<div class="answer"><div class="answernumber">1</div><div class="answerhead">answer by Harold <span title="expand this comment" class="answeropener">expand</span><div class="text">this is my answer</div></div></div>

<div class="answer"><div class="answernumber">2</div><div class="answerhead">answer by Jesse <span title="expand this comment" class="answeropener">expand</span><div class="text">this is my answer too</div></div></div>

<div class="answer"><div class="answernumber">3</div><div class="answerhead">answer by Seth <span title="expand this comment" class="answeropener">expand</span><div class="text">I don't know</div></div></div>

</div>
</div>
</div>
<br/><br/>
<div class="item" id="question2"> 
<div class="tophead">How do you skin a chicken?</div> 
<div class="bottomhead">by Gerald, 1 hour ago <span class="allopener highlighti">open/close</span> <span>all answers below<span> 
<div class="answers"> 
 
<div class="answer"><div class="answernumber">1</div><div class="answerhead">answer by Harold <span title="expand this comment" class="answeropener">expand</span><div class="text">this is my answer</div></div></div> 
 
<div class="answer"><div class="answernumber">2</div><div class="answerhead">answer by Jesse <span title="expand this comment" class="answeropener">expand</span><div class="text">this is my answer too</div></div></div> 
 
<div class="answer"><div class="answernumber">3</div><div class="answerhead">answer by Seth <span title="expand this comment" class="answeropener">expand</span><div class="text">I don't know</div></div></div>

CSS

span.allopener, span.answeropener { color: blue; display: inline-block; cursor: pointer; }
span.highlightc {border-right:1px solid #DCDCDC; color: red; }
span.highlighti {background: #FFFFFF; color: orange; }
.text {display:none;}
.answer{ border: solid 1px #ddd; padding: 2px; }
.text { border: solid 1px #bbb; padding: 2px; }

JavaScript

$('.answeropener').click(function() {
    var q = $(this).closest('.item');
    $(this).toggleClass("highlightc").next().toggle();
    q.find('.allopener').toggleClass("highlighti", q.find('.text:hidden').length > 0);
    return false;
});
$('.allopener').click(function() {
    var q = $(this).closest('.item'), any = q.find('.text:hidden').length > 0;
    q.find('.text').toggle(any).prev().toggleClass('highlightc', any);
    $(this).toggleClass("highlighti", any);
    return false;
});