Show/Hide an element on Radio button Selection using JS

avatar

Borislav Hadzhiev

Thu Jan 06 20223 min read

banner

Photo by Amos Bar-Zeev

Show/Hide an element on Radio button Selection using JS #

To show or hide an element when a radio button is selected:

  1. Add a click event handler to all input elements of type radio.
  2. Each time a radio button is selected, check if it is the button that should show the element.
  3. If it is, set the display property of the hidden element to block.

Here is the HTML for the examples in this article.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <style> #box { display: none; background-color: blueviolet; color: white; width: 100px; height: 100px; } </style> <body> <p>Select an option:</p> <div> <input type="radio" id="hide" name="example" value="hide" checked /> <label for="hide">Hide</label> </div> <div> <input type="radio" id="show" name="example" value="show" /> <label for="show">Show</label> </div> <div id="box">Box is now shown</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const box = document.getElementById('box'); function handleRadioClick() { if (document.getElementById('show').checked) { box.style.display = 'block'; } else { box.style.display = 'none'; } } const radioButtons = document.querySelectorAll('input[name="example"]'); radioButtons.forEach(radio => { radio.addEventListener('click', handleRadioClick); });

We used the querySelectorAll method to select all radio buttons with a name attribute set to example.

All of the radio buttons in the group are going to have the same name attribute so this is a reliable way to select the collection.

The function we passed to the forEach method gets called with each radio button in the collection.

We added a click event listener to every button, so every time a radio button is clicked, a function is invoked.

Inside of the function, we check if the radio button with id set to show is selected and if it is, we set the display property of the hidden element toblock.

show div on radio button click

If you click on the hide radio button, the box is hidden again.

We used the display property in the examples, however you might need to use the visibility property depending on your use case.

When an element's display property is set to none, the element is removed from the DOM and has no effect on the layout. The document is rendered as though the element does not exist.

On the other hand, when an element's visibility property is set to hidden, it still takes up space on the page, however the element is invisible (not drawn). It still affects the layout on your page as normal.

Here is an example that uses the visibility property to show and hide the element on radio button selection.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <style> #box { visibility: hidden; background-color: blueviolet; color: white; width: 100px; height: 100px; } </style> <body> <p>Select an option:</p> <div> <input type="radio" id="hide" name="example" value="hide" checked /> <label for="hide">Hide</label> </div> <div> <input type="radio" id="show" name="example" value="show" /> <label for="show">Show</label> </div> <div id="box">Box is now shown</div> <div>More content here</div> <script src="index.js"></script> </body> </html>

And here is the related JavaScript code.

index.js
const box = document.getElementById('box'); function handleRadioClick() { if (document.getElementById('show').checked) { box.style.visibility = 'visible'; } else { box.style.visibility = 'hidden'; } } const radioButtons = document.querySelectorAll('input[name="example"]'); radioButtons.forEach(radio => { radio.addEventListener('click', handleRadioClick); });

If you load the page, you'll see that the element still takes space on the page, even though it is hidden.

element hidden visibility property

The element after the hidden div does not take its place, because that's how the visibility property works - elements are invisible, but still affect the layout on the page.

Had we set the display property to none, the element would be taken out of the DOM and the next element would have taken its place.

Showing and hiding elements using the display property can lead to cumulative layout shift on the page, which can be confusing to users.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee