How can we Create a multi button to display with CSS/HTML/JS?

I am looking to create a fairly simple webpage that consists of 4 buttons that when clicked display a different output in the same location. Ex: Button 1 outputs a query that displays Pizza Sauces and Button 2 outputs a query that displays Pizza Toppings, but both display in the Output Box. I have the proper queries made up, but I am having trouble figuring out how to get the buttons to work together and display in the same location.

Example of Page Layout

The code I have currently is a simple Display/Hide method with JS scripting but I’ve come to realize it isn’t what I am looking for and probably need to scrap it. Any help or hints would be greatly appreciated!

EXAMPLE CODE:

<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>

Answer

Here’s a simplified vanilla CSS version without any Javascript using the ‘radio hack’ to toggle elements. Uses Flexbox layout for easy centering of elements and content.

/* hide the radios */
[name="btnGroup"] { display: none }

/* actions, toggle content when resp. radio is checked */
#reset:checked  ~ .pizza-box        { background-color: transparent; border: none }
#reset:checked  ~ .pizza-box::after { content: "" }

#radio1:checked ~ .pizza-box::after { content: "checked 1" }
#radio2:checked ~ .pizza-box::after { content: "checked 2" }
#radio3:checked ~ .pizza-box::after { content: "checked 3" }
#radio4:checked ~ .pizza-box::after { content: "checked 4" }

/* layout eye-candy */
.container, .button, .pizza-box {
    display: flex;
    flex-flow: row wrap;
    justify-content: center; align-content: center; align-items: center;
}
.container {
    width: 100%; gap: .5rem; padding: .5rem
}
.button, .pizza-box {
    min-width: 6rem;
    line-height: 2.25rem;
    padding: 0 .5rem;

    border: 1px solid Gray;
}

.button {
    background-color: #e8e8e8; border-radius: 28px;

    box-shadow: 0px 2px 1px -1px hsl(0,0%,0%,.20),
                0px 1px 1px  0px hsl(0,0%,0%,.14),
                0px 1px 3px  0px hsl(0,0%,0%,.12);
}
.button:active:not(:focus) {
    transform: scale(1);
}
.button:hover {
    transform: scale(1.03);

    box-shadow: 0px 3px 3px -2px hsl(0,0%,0%,.20),
                0px 3px 4px  0px hsl(0,0%,0%,.14),
                0px 1px 8px  0px hsl(0,0%,0%,.12);
}

.pizza-box { background-color: Tomato; flex-basis: 100%; min-height: 10vh }

<div class="container">
    <label class="button" for="reset" >reset   </label><input id="reset"  type="radio" name="btnGroup" checked>
    <label class="button" for="radio1">button 1</label><input id="radio1" type="radio" name="btnGroup">
    <label class="button" for="radio2">button 2</label><input id="radio2" type="radio" name="btnGroup">
    <label class="button" for="radio3">button 3</label><input id="radio3" type="radio" name="btnGroup">
    <label class="button" for="radio4">button 4</label><input id="radio4" type="radio" name="btnGroup">

    <div class="pizza-box"><!-- the tab window --></div>
</div>