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

Question

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 1

You can do it with simple JS or jQuery.

Here is an example using 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>

This is a simple example. You can do a lot using JS & jQuery.

Answer 2

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>