JSFiddle - React, Tailwind, and code Playground

by learner73

HTML

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div class="content">
  <div class="parent normal">
    <div class="children">
    <p>Click this to expand the div</p>
    </div>
  </div>

  <div class="expanded-content">
    <div class="expand-child">
      <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

.parent {
  background-color: #346996;
  color: #fff;
  padding: 20px;
  cursor: pointer;
}

.parent.expand {
  background-color: #3C4E75;
}

.expanded-content {
  background-color: #3C4E75;
  color: #fff;
  padding: 20px;
  display: none;
  border-top: 2px solid #ccc;
}

JavaScript

// open expand content
$('body').on('click', '.parent.normal', function () {
  $(this).removeClass('normal');
  $(this).addClass('expand');
  $(this).parent().find('.expanded-content').slideDown(300);
});

// close expand content
$('body').on('click', '.parent.expand', function () {
  $(this).removeClass('expand');
  $(this).addClass('normal');
  $(this).parent().find('.expanded-content').slideUp(300);
});

// close expand div by clicking anywhere outside of the expand content 
  if($('.parent.expand').length > 0) {
    $('div:not(".parent.normal, .expanded-content, .expanded-content > div")').click(function () {
      $('.parent.expand').click();
    });
  }