JSFiddle - React, Tailwind, and code Playground

by elizabethkmathew

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<ul class="item">
  <li class="item-list-container"><span class="item-list">Item1</span>
    <p class="more-content hide-content">
      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. I
    </p>
  </li>
  <li class="item-list-container"><span class="item-list">Item2</span>
    <p class="more-content hide-content">
      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. I
    </p>
  </li>
  <li class="item-list-container"><span class="item-list">Item3</span>
    <p class="more-content hide-content">
      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. I
    </p>
  </li>
  <li class="item-list-container hide-content more-list"><span class="item-list">Item4</span>
    <p class="more-content hide-content">
      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. I
    </p>
  </li>
  <li class="item-list-container hide-content more-list"><span class="item-list">Item5</span>
    <p class="more-content hide-content">
      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...

CSS

.item-list {
  position: relative;
  width: 100px;
  padding: 10px 30px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  display: inline-block;
  cursor: pointer;
}

.item-list:after {
  position: absolute;
  content: "+";
  color: #ccc;
  right: 5px;
  font-size: 32px;
  top: 0;
}

.hide-content {
  display: none;
}

.item-list-container {
  list-style-type: none
}

.item-list-container:first-child .item-list {
  border-top: 1px solid #ccc;
}

.view-more {
  border: 1px solid #ccc;
  background: #ddd;
  padding: 12px 30px;
  width: 100px;
  text-align: center;
  display: inline-block;
}

JavaScript

$(".view-more").click(function(event) {
  event.preventDefault();
  $(".item").find("li.more-list").toggleClass("hide-content");
});
$(".item-list").click(function() {
  $(this).parents(".item-list-container").find(".more-content").toggleClass("hide-content");
});