Conceal a div depending on the selected radio button within a form

Question

Conceal a div depending on the selected radio button within a form

On my form, there are two radio buttons to choose from: one for "yes" and the other for "no". I am looking to create a feature that will hide a specific div on the form when the "no" option is selected. I have tried various JavaScript solutions found online, but none of them seem to work for me.
Can anyone provide the correct code for this functionality? It could be in JavaScript, PHP, or CSS.

Below is the snippet of my current code:

<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="yes" id="yes" checked value="YES">
<label for="hsi">YES</label>
<span class="check"></span>
</div>
<div class="form-radio-item">
<input type="radio" name="no" id="no" value="NO">
<label for="hno">NO</label>
<span class="check"></span>
</div>
</div>

<div id="hello">
You clicked on NO, so this div disappears.    
</div>

javascript html forms css

Answer 1

Answer №1

To make your radio button functionality work correctly, ensure that you have event listeners attached to your input elements. Also, remember to assign the same name to both radio buttons. In the code snippet below, I have used inputs as the name for the radio buttons. The display style of the #hello element toggles based on the radio button selection.

const hello = document.getElementById('hello');

document.getElementById('yes')
  .addEventListener('click', function() {
    hello.style.display = null;
  });
  
document.getElementById('no')
  .addEventListener('click', function() {
    hello.style.display = 'none';
  });

<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="inputs" id="yes" checked value="YES">
<label for="hsi">YES</label>
<span class="check"></span>
</div>
<div class="form-radio-item">
<input type="radio" name="inputs" id="no" value="NO">
<label for="hno">NO</label>
<span class="check"></span>
</div>
</div>

<div id="hello">
You selected NO, and this div will now disappear.    
</div>

Answer 2

To make your radio button functionality work correctly, ensure that you have event listeners attached to your input elements. Also, remember to assign the same name to both radio buttons. In the code snippet below, I have used inputs as the name for the radio buttons. The display style of the #hello element toggles based on the radio button selection.

const hello = document.getElementById('hello');

document.getElementById('yes')
  .addEventListener('click', function() {
    hello.style.display = null;
  });
  
document.getElementById('no')
  .addEventListener('click', function() {
    hello.style.display = 'none';
  });

<div class="form-radio">
<label for="sons" class="radio-label">Question:</label>
<div class="form-radio-item">
<input type="radio" name="inputs" id="yes" checked value="YES">
<label for="hsi">YES</label>
<span class="check"></span>
</div>
<div class="form-radio-item">
<input type="radio" name="inputs" id="no" value="NO">
<label for="hno">NO</label>
<span class="check"></span>
</div>
</div>

<div id="hello">
You selected NO, and this div will now disappear.    
</div>

Answer 3

Answer №2

To achieve this effect, pure CSS can be used. However, it is important to consider the structure of your entire webpage before implementing any solution.

.form-radio {
  position: relative;
  padding-bottom: 2rem;
}

input#no ~ #floatingDescription  {
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: block;
}

input#no:checked ~ #floatingDescription {
  display: none;
}

<!DOCTYPE html>
<hml>

<body>
  <div class="form-radio">
    <label for="sons" class="radio-label">Question:</label>
    <div class="form-radio-item">
      <input type="radio" name="answer" id="yes" checked>
      <label for="hsi">YES</label>
    </div>
    <div class="form-radio-item">
      <input type="radio" name="answer" id="no">
      <label for="hno">NO</label>
      <div id="floatingDescription">You clicked on NO, so this div disappears.</div>
    </div>
  </div>

</body>
</html>

Answer 4

To achieve this effect, pure CSS can be used. However, it is important to consider the structure of your entire webpage before implementing any solution.

.form-radio {
  position: relative;
  padding-bottom: 2rem;
}

input#no ~ #floatingDescription  {
  position: absolute;
  bottom: 0px;
  left: 0px;
  display: block;
}

input#no:checked ~ #floatingDescription {
  display: none;
}

<!DOCTYPE html>
<hml>

<body>
  <div class="form-radio">
    <label for="sons" class="radio-label">Question:</label>
    <div class="form-radio-item">
      <input type="radio" name="answer" id="yes" checked>
      <label for="hsi">YES</label>
    </div>
    <div class="form-radio-item">
      <input type="radio" name="answer" id="no">
      <label for="hno">NO</label>
      <div id="floatingDescription">You clicked on NO, so this div disappears.</div>
    </div>
  </div>

</body>
</html>

Conceal a div depending on the selected radio button within a form

Answer №1

Answer №2

Similar questions

Using Selenium 2 to dynamically insert CSS styles into the currently visible webpage

Remove any overlapping datetime values from a JavaScript array of objects

Struggling with creating a fluid/elastic/liquid layout in HTML. Can someone please assist me with this

Compatibility of HTML5 websites with Internet Explorer

concealing components during screen adjustments

Implement Spacing Between Components in React Native

Validating in Angular cannot be accomplished

What is the reason for using a callback as a condition in the ternary operator for the Material UI Dialog component?

Is there an issue with the JSON data?

Decreasing the gap between two <tr> elements

Exploring the capabilities of Redux Toolkit's createEntityAdapter in designing versatile data grids

Once all the fields are filled, I would like for my button to trigger the opening of my

Unable to obtain the accurate response from a jQuery Ajax request

Achieving a fixed Bootstrap navbar at the top along with a sidebar: A comprehensive

The view has no access to $scope but the controller does

After resolving a promise, what is the process for loading a Next.js App?

When my webpage is opened in Firefox, I notice that it automatically scrolls down upon loading

I'm finding it difficult to understand the reasoning behind the custom hook I created

Tips for building a live React app!

What triggers the appearance of the message "Error: Uncaught (in promise): Response with status:200 for Url:null"?