<p id="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus eligendi natus laborum itaque veniamligendi natus laborum itaque veniam
        excepturi ipsa maiores adipisci rerum impedit eius, officiis, voluptates consequatur odioligendi natus laborum itaque veniam
        excepturi ipsa maiores adipisci rerum impedit eius, officiis, voluptates consequatur odioligendi natus laborum itaque veniam
        excepturi ipsa maiores adipisci rerum impedit eius, officiis, voluptates consequatur odio
        excepturi ipsa maiores adipisci rerum impedit eius, officiis, voluptates consequatur odio?4</p>
    <button id="btn" onclick="toggleHide()">don't Show the Text</button>
 #btn {
        color: crimson;
        background-color: white; 
        padding: 10px;
        border-radius: 12px;
        border: 0px solid black;
        font-family: 'Segoe UI';
    }

    #btn:hover {
        background-color: rgb(131, 131, 131);
        cursor: pointer;
    }


body{
    color: crimson;
        background-color: rgb(0, 0, 0);
}
function toggleHide() {
        let btn = document.getElementById('btn');
        let para = document.getElementById('para')
        if (para.style.display != 'none') {
            btn.innerText = 'Show Text'
            para.style.display = 'none';
        }

        else {
            btn.innerText = 'dont show Text'
            para.style.display = 'block'
        }
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.