Display content related to only those button it is clicked in HTML

Question

I have three buttons in HTML, orders and products and supplier. I want when the user clicks orders order is being shown, when the user clicks products, the product is shown, and the name of the supplier when it is clicked.

function changedata(parameter){
    if(parameter==0){
        document.getElementById('myorders').style.fontSize="25px";
    }
    else if(parameter==1){
        document.getElementById('myproducts').style.fontSize="25px";
    }
    else{
        document.getElementById('mysupplier').style.fontSize="25px";
    }
}





    Laptop, Earphone


    Earphone, smart watch


    Amazon, E-kart

But it won't hide data and serve my need, I'm a beginner in web development, looking for kind help to show data only when the corresponding button is pressed.

user_19200701 · Answer

Try giving each element a default value of display:none in your css, as such -

#myorders,
#mysuppliers,
#myproducts {
  font-size: 25px;
  display: none;
}

This will select each element and hide them right away.

Then, when a button is pressed, you can use

document.getElementById('___').style.display = 'block';

to then show that element.

Here is the final product:

function changedata(parameter){
    if(parameter==0){
        document.getElementById('myorders').style.display = 'block';
    }
    else if(parameter==1){
        document.getElementById('myproducts').style.display = 'block';
    }
    else{
        document.getElementById('mysupplier').style.display = 'block';
    }
}

#myorders,
#myproducts,
#mysupplier{
font-size: 25px;
display: none;
}





    Laptop, Earphone


    Earphone, smart watch


    Amazon, E-kart

If you would like to have the element toggle between hidden and shown on each button press, I recommend toggling a class with javascript, as such:

function changedata(parameter){
    if(parameter==0){
      document.getElementById('myorders').classList.toggle('active');
    }
    else if(parameter==1){
    document.getElementById('myproducts').classList.toggle('active');
    }
    else{
    document.getElementById('mysupplier').classList.toggle('active');
    }
}

#myorders,
#myproducts,
#mysupplier{
font-size: 25px;
display: none;
}
#myorders.active,
#myproducts.active,
#mysupplier.active{
display: block;
}





    Laptop, Earphone


    Earphone, smart watch


    Amazon, E-kart

user_1377002 · Answer

There are slightly easier ways to connect each div to its corresponding button, and one of them is to use data attributes. We can add a data attribute to each button the text of which matches the id of its corresponding div.

(I'm assuming that when you click on one button all the other divs are hidden, and only its div shows.)

This example uses more modern JS techniques but I'll guide you through them, comment everything, and provide documentation at the end. You don't have to understand everything here but you're probably going to bump up against these things eventually, so you might as well take a look at them now.

Here's a rundown of how this all works:

Remove the inline listeners from the buttons. Modern JS uses addEventListener.
Wrap the buttons in a container. What we're going to use is a technique called event delegation. Instead of attaching listeners to every button we attach one to the container and this captures any events that "bubble up" the DOM from its child elements. We can then call a function when a child element is clicked.
The function does a few things. First it checks to see if the clicked element was actually a button. Then it hides all the "panels" by removing a class called "show" from them ("show" sets the element's display to block - initially all panels have their display set to none). Then based on the id from the button's data attribute it forms a selector with it, and we use that to target its corresponding div and apply the "show" class.

// Cache out buttons container, and all of the panels
const buttons = document.querySelector('.buttons');
const panels = document.querySelectorAll('.panel');

// Add an event listener to the buttons container
buttons.addEventListener('click', handleClick);

// When a child element of `buttons` is clicked
function handleClick(e) {
 
  // Check to see if its a button
  if (e.target.matches('button')) {

    // For every element in the `panels` node list use `classList`
    // to remove the show class
    panels.forEach(panel => panel.classList.remove('show'));

    // "Destructure" the `id` from the button's data set
    const { id } = e.target.dataset;

    // Create a selector that will match the corresponding
    // panel with that id. We're using a template string to
    // help form the selector. Basically it says find me an element
    // with a "panel" class which also has an id that matches the id of
    // the button's data attribute which we just retrieved.
    const selector = `.panel[id="${id}"]`;

    // Select the `div` and, using classList, again add the
    // show class
    document.querySelector(selector).classList.add('show');
  }
}

.panel { display: none; }
.show { display: block; }
.button { text-transform: uppercase; }
.button:hover { cursor: pointer; background-color: #fffff0; }


  
  
  


Laptop, Earphone
Earphone, smart watch
Amazon, E-kart

Additional documentation

Display content related to only those button it is clicked in HTML

2 Answers