Show and Hide div based on radio button selection

In this article you will learn how to show and hide divs or any other content on a page when clicking on a radio button using Javascript. You will learn:

• how to create a function
• how to create variables
• how to use if/else if statements

First let’s create a simple css class:

.hide-stuff {
display: none;
}

We will use this to initially hide the content we want to use. Let’s create the input fields:

<input type="radio" name="divs" id="div1"> Check this to reveal div1 content <br><br>
<input type="radio" name="divs" id="div2"> Check this to reveal div2 content

Below the input fields let’s add the DIVs we want to show and hide:

<div id="div1-content" class="hide-stuff" style="margin-top: 25px; background-color: aquamarine; padding: 10px;">
This is a the content for div1.
</div>

<div id="div2-content" class="hide-stuff" style="margin-top: 25px; background-color: rgb(226, 159, 58); padding: 10px;">
This is a the content for div2.
</div>

By default we add the hide-stuff class to each div so they are not displayed on page load.

Now we need to store the two input fields and the two DIVs in variables:

const firstRadio = document.getElementById('div1');
const secondRadio = document.getElementById('div2');
const div1Content = document.getElementById('div1-content');
const div2Content = document.getElementById('div2-content');

Now let’s create a function to hide and reveal the content:

function showHideDiv() {
   if(firstRadio.checked){
      div1Content.classList.remove('hide-stuff');
      div2Content.classList.add('hide-stuff');
   }
   else if(secondRadio.checked) {
      div2Content.classList.remove('hide-stuff');
     div1Content.classList.add('hide-stuff');
   }
}

So here we create a function called showHideDiv and first check if the first radio button is checked or not. For this we use the checked property which is a boolean and will have a value of true if checked.

If the condition is true, then we’ll remove the hide-stuff css class from the first div and add it to the second. The else if condition works the same way but the other way around and here we check whether the second radio button was checked.

Now that we have our function ready, we need to update our input fields and add an onclick event to it.

<input type="radio" name="divs" id="div1" onclick="showHideDiv()"> Check this to reveal div1 content <br><br>
<input type="radio" name="divs" id="div2" onclick="showHideDiv()"> Check this to reveal div2 content