JSFiddle - React, Tailwind, and code Playground

HTML

<p class="button">Show/hide<p>

<div> I want to hide this by pressing the button above </div>

CSS

.button {
    display: block;
    height: 20px;
    width: 100px;
    background: lightgreen;
    text-align: center;
    padding: 5px;
    font: 15px Tahoma;
    border: 1px solid black;
    text-decoration: none;
    list-style:none;
    margin: 10px 0px 10px 0px;
}
#showhide {
    display: none;
}

JavaScript

function Toggle() {
    var div = document.getElementsByTagName('div')[0];

    if (div.style.display == 'none') {
        div.style.display = 'block';
    } else {
        div.style.display = 'none';
    }
}

(function () {

    var button = document.querySelectorAll(".button");

    for (var i = 0; i < button.length; i++) {
        if (button[i].addEventListener) {
            button[i].addEventListener("click", function () {
                Toggle();
            });
        } else {
            button[i].attachEvent("click", function () {
                Toggle();
            });
        }
    }
})();