JSFiddle - React, Tailwind, and code Playground

HTML

<button id="showMessages">
Show Messages
</button> 
<button id="hideMessages">
Hide Messages
</button>
<section id="messagesBox">
  <div>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
  </div>
   <div>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
  </div>
   <div>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
  </div>
</section>

JavaScript

var messages = document.getElementById("messagesBox");
messages.style.display = "none";

var buttonShowMessages = document.getElementById("showMessages");
var buttonHideMessages = document.getElementById("hideMessages");

buttonHideMessages.style.display = "none";

buttonShowMessages.addEventListener("click", showMessages);
buttonHideMessages.addEventListener("click", hideMessages);


function showMessages(){
		var messages = document.getElementById("messagesBox");
    var buttonShowMessages = document.getElementById("showMessages");
    var buttonHideMessages = document.getElementById("hideMessages");
    
    messages.style.display = "block";
    
    buttonShowMessages.style.display = "none";
    buttonHideMessages.style.display = "block";
}

function hideMessages(){
		var messages = document.getElementById("messagesBox");
    var buttonShowMessages = document.getElementById("showMessages");
    var buttonHideMessages = document.getElementById("hideMessages");
    
     messages.style.display = "none";
    
    buttonShowMessages.style.display = "block";
    buttonHideMessages.style.display = "none";
}