How to make a part of the website unhidden by only clicking a radio button

user_19711236 0
Viewed 90

I have hidden two parts of code and created two radio buttons.

I would like to unhide the first part if radio button 1 is selected but hide it again when radio button 2 is selected and unhide the second hidden part. And vice versa without using a submit button.

I have looked at other questions about radio buttons and/or hiding and unhiding html code but most of the time the code from the asker is so extreme long, I am not seeing the complete picture.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>How to make a part of the website unhidden by only clicking a radio button</title>
    </head>
    <body>
    <!-- Radio Buttons to choose which part should be visible -->
    <input type="radio" id="option_1" name="options" value="option_1">
    <label for="option_1">Option 1</label><br>
    <input type="radio" id="option_2" name="options" value="option_2">
    <label for="option_2">Option 2</label><br><br>
    
    <!-- Hidden part #1 -->
    <div hidden class="hidden_part_1">This turns visible by selecting radio button with Option 1</div>
    
    <!-- Hidden part #1 -->
    <div hidden class="hidden_part_2">This turns visible by selecting radio button with Option 2</div>
    </body>
    </html>

html
6 Answers

Using onclick you can run a JS function that sets an object as visible or invisible.

Added JS, and onclick function to toggle between what is visible.

const part1 = document.querySelector(".hidden_part_1");
const part2 = document.querySelector(".hidden_part_2");

part1.style.display = "none";
part2.style.display = "none";

function button1() {
  part1.style.display = "block";
  part2.style.display = "none";
}

function button2() {
  part1.style.display = "none";
  part2.style.display = "block";
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>How to make a part of the website unhidden by only clicking a radio button</title>
</head>

<body>
  <!-- Radio Buttons to choose which part should be visible -->
  <input type="radio" id="option_1" name="options" value="option_1" onclick="button1()">
  <label for="option_1">Option 1</label><br>
  <input type="radio" id="option_2" name="options" value="option_2" onclick="button2()">
  <label for="option_2">Option 2</label><br><br>

  <!-- Hidden part #1 -->
  <div class="hidden_part_1">This turns visible by selecting radio button with Option 1</div>

  <!-- Hidden part #1 -->
  <div class="hidden_part_2">This turns visible by selecting radio button with Option 2</div>
</body>

</html>

user_184166710

You can define the click events in a single document.querySelectorAll.forEach() loop:

document.querySelectorAll("[name=options]").forEach(el=>{
 el.onclick=ev=>{
  document.querySelectorAll("[class^=hidden]").forEach(d=>{
   d.hidden=!d.classList.contains(el.value.replaceAll("option","hidden_part"))
  });
 }
})
   
<input type="radio" id="option_1" name="options" value="option_1">
<label for="option_1">Option 1</label><br>
<input type="radio" id="option_2" name="options" value="option_2">
<label for="option_2">Option 2</label><br>
<input type="radio" id="option_3" name="options" value="option_3">
<label for="option_3">Third Option </label><br><br>

<!-- Hidden parts -->
<div hidden class="hidden_part_1">This turns visible by selecting radio button with Option 1</div>
<div hidden class="hidden_part_2">This turns visible by selecting radio button with Option 2</div>
<div hidden class="hidden_part_3">This third div turns visible by selecting radio button with Option 3</div>

Thanks, @mplungjan, for the idea with the boolean value. This works too, of course. Assigning the events in a .forEach() loop makes the page easier to maintain, as options and <div>s can easily be added or removed at any point.

user_26100610

I would delegate: Wrap in a container and add an eventListener to it

I have changed the IDs and classes to make more sense

const radioGroup = document.getElementById("radioGroup");
radioGroup.addEventListener("click", function(e) {
  const tgt = e.target;
  if (!tgt.matches("[name=options]")) return; // not one of the radios
  const id = tgt.id.replace("option","part");
  console.log(id)
  document.querySelectorAll(".hiddenDiv").forEach(div => div.hidden = div.id !== id)
})
<div id="radioGroup">
  <!-- Radio Buttons to choose which part should be visible -->
  <input type="radio" id="option_1" name="options" value="option_1">
  <label for="option_1">Option 1</label><br>
  <input type="radio" id="option_2" name="options" value="option_2">
  <label for="option_2">Option 2</label><br><br>
</div>
<!-- Hidden part #1 -->
<div hidden class="hiddenDiv" id="part_1">This turns visible by selecting radio button with Option 1</div>

<!-- Hidden part #1 -->
<div hidden class="hiddenDiv" id="part_2">This turns visible by selecting radio button with Option 2</div>

user_2957830

You will need a bit of javascript. You can create a function that is triggered by pressing one of the options, then you manipulate your elements.

See also W3schools: How TO - Toggle Hide and Show and Developer.Mozilla: HTMLElement.hidden

function changeVisibilty(whichOne) {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  if (whichOne === 1) {
    one.hidden = false;
    two.hidden = true;
  } else {
    one.hidden = true;
    two.hidden = false;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>How to make a part of the website unhidden by only clicking a radio button</title>
</head>

<body>
  <!-- Radio Buttons to choose which part should be visible -->
  <input type="radio" id="option_1" name="options" onclick="changeVisibilty(1)" value="option_1">
  <label for="option_1">Option 1</label><br>
  <input type="radio" id="option_2" name="options" onclick="changeVisibilty(2)" value="option_2">
  <label for="option_2">Option 2</label><br><br>

  <!-- Hidden part #1 -->
  <div hidden class="hidden_part_1" id="one">This turns visible by selecting radio button with Option 1</div>

  <!-- Hidden part #2 -->
  <div hidden class="hidden_part_2" id="two">This turns visible by selecting radio button with Option 2</div>
</body>

</html>

user_149984870

Here is a solution without changing your HTML part:

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>How to make a part of the website unhidden by only clicking a radio button</title>
    </head>

    <body>
        <!-- Radio Buttons to choose which part should be visible -->
        <input type="radio" id="option_1" name="options" value="option_1">
        <label for="option_1">Option 1</label><br>
        <input type="radio" id="option_2" name="options" value="option_2">
        <label for="option_2">Option 2</label><br><br>

        <!-- Hidden part #1 -->
        <div hidden class="hidden_part_1">This turns visible by selecting radio button with Option 1</div>

        <!-- Hidden part #1 -->
        <div hidden class="hidden_part_2">This turns visible by selecting radio button with Option 2</div>
    </body>

    <script>
        let elOne = document.getElementsByClassName("hidden_part_1")[0];
        let elTwo = document.getElementsByClassName("hidden_part_2")[0];

        window.onclick = e => {
            if (e.target.id === "option_1") {
                elOne.hidden = "";
                elTwo.hidden = "hidden";
            }
            else if (e.target.id === "option_2") {
                elOne.hidden = "hidden";
                elTwo.hidden = "";

            }
        }

    </script>

    </html>

user_189665200

Without javascript you would need to use the CSS MDN: general sibling selector (~)

Simply define the text to toggle as display: hidden and activate the text (display: block, or whatever you need) upon a radio button getting :checked.

Check the snippet (where I removed the hidden attribute from the divs to make it work...):

.hidden_part_1,
.hidden_part_2 { display: none }

#option_1:checked ~ .hidden_part_1,
#option_2:checked ~ .hidden_part_2 { display: block }
<!-- Radio Buttons to choose which part should be visible -->
    <input type="radio" id="option_1" name="options" value="option_1">
    <label for="option_1">Option 1</label><br>
    <input type="radio" id="option_2" name="options" value="option_2">
    <label for="option_2">Option 2</label><br><br>
    
    <!-- Hidden part #1 -->
    <div class="hidden_part_1">This turns visible by selecting radio button with Option 1</div>
    
    <!-- Hidden part #1 -->
    <div class="hidden_part_2">This turns visible by selecting radio button with Option 2</div>

user_20159090
Related