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'>helloooooooooooo</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 mysplittedtitle = clickedTitle.innerHTML.split(" ");
            var newTitle = "- "+mysplittedtitle[1];
            clickedTitle.innerHTML =newTitle;


    }else{
            contentC.style.display = 'none';
            var mysplittedtitle = clickedTitle.innerHTML.split(" ");
            var newTitle = "+ "+mysplittedtitle[1];
            clickedTitle.innerHTML=newTitle;


    }
            }