JSFiddle - React, Tailwind, and code Playground

by staeff

HTML

<html>
  
  <head>
    <title></title>
  </head>
  
  <body>
    <!-- our standard data container -->
    <div class="post">
      <!-- clicking on the header will make the .content slide up -->
      <div class="header">Text</div>
      <!-- content should be placed here whose visibility you can
      toggle -->
      <div class="content">Hey there! I'm content!</div>
    </div>
    <div class="post">
      <div class="header">Text</div>
      <div class="content">Hey there! I'm content!</div>
    </div>
    <div class="post">
      <div class="header">Text</div>
      <div class="content">Hey there! I'm content!</div>
    </div>
    <button id="hide_all">Hide All</button>
    <button id="show_all">Show All</button>
  </body>

</html>

CSS

.post {
  background: #ccc;
}
.header {
  background: #ddd;
}
.content {
  background: #eee;
}

JavaScript

// Hide/Show content boxes
$(function () {
  $('.header').click(function () {
    $(this).next().stop().animate({
      height: 'toggle'
    }, 250);
  });

  $('#hide_all').click(function () {
    $('.content').slideUp(250);
  });

  $('#show_all').click(function () {
    $('.content').slideDown(250);
  });
});