JSFiddle - React, Tailwind, and code Playground

by NotInUse

HTML

<div id="ending">
  An everyday snapshot of
  <div class="toggle"><span style="font-size:11px">(+) </span>two </div> sfsfs



</div>

<div class="content">
  <a href="http://sfs.co.nz/" target="_blank">sfs</a> & <a href="http://sfsfs.co.nz/" target="_blank">sfsf</a>

</div>

CSS

.toggle {
  display: inline-block;
  cursor: pointer;
  color: #979797;
  letter-spacing: 0.2px;
  transition: 0.5s all;
}

.toggle:hover {
  color: #222;
  transition: 0.5s all;
}

.active {
  color: #BBBBBB;
}

div.content {
  float: left;
  text-align: justify;
  letter-spacing: 0px;
  font-size: 12px;
  line-height: 1.7;
  display: none;
  padding-top: 15px;
  color: #979797;
}

.content::before {
  content: '';
  margin-top: 20px;
  display: block;
  font-family: 'Antwerp-Light';
  font-size: 30px;
  text-align: left;
  color: #CECECE;
}

JavaScript

$(document).ready(function() {
  $(".content").hide();
  $(".toggle").on("click", function() {
    var txt = $(".content").is(':visible') ? '(+) two' : '(-) two';
    $(".toggle").text(txt);
    $(".toggle").toggleClass('active');
    $(this).parent().next('.content').slideToggle(450);
    e.stopPropagation();
  });
});