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

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 >
    <div id="ClearanceBox" >
        <div >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 >
    <div >
    
    <div >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>

CodePudding user response：

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 >
    <label  for="reset" >reset   </label><input id="reset"  type="radio" name="btnGroup" checked>
    <label  for="radio1">button 1</label><input id="radio1" type="radio" name="btnGroup">
    <label  for="radio2">button 2</label><input id="radio2" type="radio" name="btnGroup">
    <label  for="radio3">button 3</label><input id="radio3" type="radio" name="btnGroup">
    <label  for="radio4">button 4</label><input id="radio4" type="radio" name="btnGroup">

    <div ><!-- the tab window --></div>
</div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div >
  <button data-text='Button 1' >Button 1</button>
  <button data-text='Button 2' >Button 2</button>
  <button data-text='Button 3' >Button 3</button>
  <button data-text='Button 4' >Button 4</button>
</div>

<div >
  <div >
    <p> Click on a button </b>
  </div>
</div>

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