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

April 13, 2022

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>

>Solution :

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.