Show/Hide an element on Radio button Selection using JS

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

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

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

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <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>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
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);
});

The code for this article is available on GitHub

We used the document.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 NodeList.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 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 to block.

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 does not affect 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, but the element is invisible (not drawn).

However, the element still affects the layout on your page as normal.

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

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

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <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>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
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);
});

The code for this article is available on GitHub

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

The element after the hidden div doesn't take its place because that's how the visibility property works. Elements are invisible but still affect the layout of the page.

Had we set the display property to none, the element would have been 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 for users.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Show/Hide an element on Radio button Selection using JS