JSFiddle - React, Tailwind, and code Playground

HTML

<div class='collapsibleCont'><h3 id='collapsible1' class='collapsibleTitle' onclick="handleCollapsible('collapsible1')">+ <span id="title">title</span></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.childNodes[1];
  if (contentC.style.display == 'none') {
    contentC.style.display = 'block';
    var mysplittitle = document.getElementById("title").innerHTML();
    var newTitle = "- " + mysplittitle;
    clickedTitle.innerHTML = newTitle;
  } else {
    contentC.style.display = 'none';
    var mysplittitle = document.getElementById("title").innerHTML();
    var newTitle = "+ " + mysplittitle;
    clickedTitle.innerHTML = newTitle;
  }
}