JSFiddle - React, Tailwind, and code Playground

HTML

<!- the outer div with the class "sidebar" isn't important, it's just any container -->
<div class="sidebar">
  <div class="collapse-trigger">Cool content heading</div>
  <div class="collapsible">
    <p>
      This content would be neat to hide and show at the click of a button!
    </p>
  </div>
</div>

CSS

/* the sidebar class is just an arbitrary container for this example */
.sidebar {
  width: 30%;
  padding: 1em;
  border: black solid 2px;
}

.collapse-trigger::after {
    content: "▼";
    float: right;
}

.collapse-trigger.active::after {
    content: "▲";
}

.collapsible {
    display: none;
}

.collapse-trigger.active + .collapsible {
    display: block;
}

JavaScript

function attachCollapseTriggers() {
    var colTriggers = document.getElementsByClassName("collapse-trigger");
    for (var colTrig of colTriggers) {
        colTrig.addEventListener("click",  function() {
            this.classList.toggle("active");
        });
    }
}

attachCollapseTriggers();