JSFiddle - React, Tailwind, and code Playground

HTML

<button id="csrmore" onclick="myFunction()">
Show more
</button>


<div id="myDIV" class="hidden">
This is the triggerable content.
</div>

CSS

div {
  width: 100px;
  height: 100px;
}

.hidden {
  display:none
}

.shown {
  display:block;
}

JavaScript

function myFunction() {
var moreText = document.getElementById("csrmore");
var x = document.getElementById("myDIV");
  let ishidden = x.classList.contains("hidden")
if (ishidden == true) {
x.classList.remove("hidden");
x.classList.add("shown");
moreText.innerHTML = "Show less";
}
else  {
x.classList.remove("shown");
x.classList.add("hidden");
moreText.innerHTML = "Show more";
}	
console.log(moreText.innerHTML);
}