Wie können wir eine Multi-Schaltfläche erstellen, die mit CSS/HTML/JS angezeigt werden soll?

Ich möchte eine ziemlich einfache Webseite erstellen, die aus 4 Schaltflächen besteht, die beim Klicken eine andere Ausgabe an derselben Stelle anzeigen. Beispiel: Schaltfläche 1 gibt eine Abfrage aus, die Pizzasaucen anzeigt, und Schaltfläche 2 gibt eine Abfrage aus, die Pizzabeläge anzeigt, aber beide werden im Ausgabefeld angezeigt. Ich habe die richtigen Abfragen erstellt, aber ich habe Probleme herauszufinden, wie ich die Schaltflächen dazu bringen kann, zusammenzuarbeiten und an derselben Stelle angezeigt zu werden.

Beispiel für Seitenlayout

Der Code, den ich derzeit habe, ist eine einfache Display/Hide-Methode mit JS-Skripting, aber ich habe festgestellt, dass es nicht das ist, wonach ich suche, und muss es wahrscheinlich verschrotten. Jede Hilfe oder Hinweise würden sehr geschätzt!

BEISPIELCODE:

<div class="container">
 <div id="ClearanceBox" >
 <div class="t1">Build Your Own!</div>
 </div>
 </div>
<script> 
 function toggleText1() {
 var text = document.getElementById("demo1");
 
 if (text.style.display === "none") {
 text.style.display = "block";
 } else {
 text.style.display = "none";
 }
}
 function toggleText5() {
 var text = document.getElementById("demo5");
 
 if (text.style.display === "none") {
 text.style.display = "block";
 } else {
 text.style.display = "none";
 }
 
 
 
 
} 
</script>
 <div class="grid-container">
 <div class="Buttons">
 
 <div class="grid-item">1</div> 
 <button type='button' onclick="toggleText5()">Sauces</button>
 <div id='demo5' style='display: none'>
 <!--Query from DB goes here Deleted for Example Code -->
 <button type='button' onclick="toggleText1()">Toppings</button>
 <div id='demo1' style='display: none'>
 </div>
 
 </div>
</div>
</div>

Lösung des Problems

Sie können dies mit einfachem JS oder jQuery tun.

Hier ist ein Beispiel mit jQuery.

jQuery('.clickMe').click(function(e) {
e.preventDefault();
var txt = jQuery(this).attr('data-text');
jQuery('.box-output').html('<p> You clicked on <br/> '+ txt +' </p>');
});

.box-output{
 min-height: 400px;
}
.well {
border: 1px solid #ccc;
border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="d-flex justify-content-around">
 <button data-text='Button 1' class="btn clickMe btn-primary">Button 1</button>
 <button data-text='Button 2' class="btn clickMe btn-primary">Button 2</button>
 <button data-text='Button 3' class="btn clickMe btn-primary">Button 3</button>
 <button data-text='Button 4' class="btn clickMe btn-primary">Button 4</button>
</div>
<div class="container">
 <div class="well mt-3 box-output d-flex justify-content-center align-items-center">
 <p> Click on a button </b>
 </div>
</div>