JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <button data-which="three">Third text</button>
    <span class="plusminus">+</span>
</p>
<div class="text" id="three">
      And some text here
</div>

<p>
    <button data-which="four">Third text</button>
    <span class="plusminus">+</span>
</p>
<div class="text" id="four">
      And some text here
</div>

CSS

.text { display: none; }

JavaScript

var btns = document.querySelectorAll('button[data-which]');
[].forEach.call(btns, function(btn) {
    btn.addEventListener('click', function() {
        expand(this.getAttribute('data-which'));
    }, false);
});

function expand(textId) {
    var e = document.getElementById(textId);
    var sign = document.querySelector('#'+textId).parentNode.querySelector('.plusminus');
    if (e.style.display === "block") {
        e.style.display = "none";
        sign.innerText = "+";
    } else {
        e.style.display = "block";
        sign.innerText = "-";
    }
}