JSFiddle - React, Tailwind, and code Playground

HTML

<div class='collapsibleCont'>

<h3 id='collapsible1' class='collapsibleTitle' onclick="handleCollapsible('collapsible1')">+ title</h3><p style="display:none" class='collapsibleContent'>hello</p>
</div>

CSS

.collapsibleContent {
  display: none;
}

JavaScript

function handleCollapsible(id) {
  var clickedTitle = document.getElementById(id);
  var contentC = clickedTitle.parentNode.getElementsByClassName("collapsibleContent")[0];
  if (contentC.style.display == 'none') {
    contentC.style.display = 'block';
    var mysplittitle = clickedTitle.innerHTML.split(" ");
    var newTitle = "- " + mysplittitle[1];
    clickedTitle.innerHTML = newTitle;
  } else {
    contentC.style.display = 'none';
    var mysplittitle = clickedTitle.innerHTML.split(" ");
    var newTitle = "+ " + mysplittitle[1];
    clickedTitle.innerHTML = newTitle;
  }
}