JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<div id="wrapper">
    
    <div style="float:right;"><a href="javascript:void(0)" class="expand">Expand All</a> | <a href="javascript:void(0)" class="collapse">Collapse All</a></div>
<div id="one">    
    <div class="question active">Lorem ipsum dolor sit amet?</div>
    <div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec ligula lorem. Mauris laoreet sagittis sem, nec pulvinar neque tempus sit amet. Fusce at mi tortor, eget blandit velit. Phasellus sed dolor at felis auctor mollis nec eget nisl. Fusce pretium nibh nisi. Aliquam congue iaculis velit, id facilisis elit pharetra a. Nulla posuere nunc vel tortor blandit sit amet tristique dolor venenatis. Phasellus nunc odio, feugiat non egestas ut, rutrum ac elit. Pellentesque iaculis tempor diam quis ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ullamcorper, enim non imperdiet dictum, nisl eros interdum turpis, sed posuere diam ante ac orci. Pellentesque et malesuada elit.
</div>
    </div>
        <div class="question">Vestibulum in ornare metus?</div>
    <div class="answer">
Vestibulum in ornare metus. Integer in libero vitae eros bibendum ultricies. Cras ultricies risus eu massa tincidunt faucibus rutrum enim malesuada. Nullam non est a nunc tincidunt porttitor a ac odio. Cras accumsan ante in odio ultrices semper. Fusce dignissim eleifend vehicula. Aenean dictum ante et lorem lacinia vel fringilla urna vestibulum. Duis condimentum felis in ligula venenatis et auctor massa dapibus. Morbi tincidunt elit a odio scelerisque sodales. Integer et egestas lorem. Suspendisse tincidunt varius augue, ac fermentum erat ultricies laoreet. Donec eu dolor justo, a convallis lectus. Pellentesque pellentesque, erat ut dictum lacinia, orci nulla posuere tellus, at gravida nibh tellus dictum velit. Donec molestie sapien non dolor tincidunt eget interdum tortor molestie. Curabitur placerat scelerisque odio, at congue purus malesuada...

CSS

#wrapper {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
    padding-top:30px;
    font-family:verdana;
    font-size:12px;
  }

.question {  
  width: 400px;
  float: left;
  background: #fff;
  padding-left:20px;
  padding-top:18px;
  cursor: pointer;
  background-image : url(http://i53.tinypic.com/15yc9ro.gif);
  background-position : 4px -19px;
  background-repeat : no-repeat;
  }
  
.answer {  
  width: 400px;
  float: left;
  padding-top:10px;
  padding-bottom:10px;
  margin-left:20px;
  background: #fff;
    display: none;
  }

.active {
  background-image : url(http://i53.tinypic.com/15yc9ro.gif);
  background-repeat:no-repeat;
  background-position : 4px 11px;
  }

JavaScript

$(document).ready(function() { 
  $('#one .answer').show();
    
  $('.question').click(function() {
 
  if($(this).next().is(':hidden') != true) {
  $(this).removeClass('active'); 
    $(this).next().slideUp("normal");
  } else {
    $('.question').removeClass('active');  
     $('.answer').slideUp('normal');
    if($(this).next().is(':hidden') == true) {
    $(this).addClass('active');
    $(this).next().slideDown('normal');
     }   
  }
   });
 
  // Hide all the div answer
 // $('.answer').hide();
 
   //Click expand all
  $('.expand').click(function(event)
    {$('.question').next().slideDown('normal');
        {$('.question').addClass('active');}
    }
  );
 //Click collapse all
  $('.collapse').click(function(event)
    {$('.question').next().slideUp('normal');
        {$('.question').removeClass('active');}
    }
  );
});