Html - How to make a div disappear by default, then re-appear using radio buttons?

BlueWatterBottle
October 12, 2023
98 views
3 votes
3 Answers

I’m currently writing a mock-website to work on my web development skills. It is a a mock-ice cream shop that doesn’t exist in real life. Anyway – on the form to order ice cream, I want the two divs (deliveryDiv and pickupDiv) that have been created within the form to be hidden when the page loads, but nothing I have tried has worked so far.

Code

function hideAAndB() {
  var pickupDiv = document.getElementById("pickupDiv");
  var deliveryDiv = document.getElementById("deliveryDiv");
  pickupDiv.style.display = "none";
  deliveryDiv.style.display = "none";
}

function hidePickup(x) { //Formally "hideA"
  if (x.checked) {
    document.getElementById("pickupDiv").style.visibility = "hidden";
    document.getElementById("deliveryDiv").style.visibility = "visible";
  }
}

function hideDelivery(x) { //Formally "hideB"
  if (x.checked) {
    document.getElementById("deliveryDiv").style.visibility = "hidden";
    document.getElementById("pickupDiv").style.visibility = "visible";
  }
}


function init() {
  hideAAndB;
}

window.onload = init;

#deliveryDiv,
#pickupDiv {
  display: none;
  visibility: hidden;
}

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

<head>
  <title>Order Page</title>
  <meta charset="utf-8" />
  <meta name="description" content="Order page for Sweet Life.">
  <meta name="keywords" content="study">
  <meta name="author" content="Anon">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/script1.js"></script>
</head>

<body>
  <div id="orderhtml">
    <!--Header-->
    <header>
      <h1 class="header" id="headerTop">Sweet Life</h1>
      <h2 class="header" id="headerBottom">Discover a world of ice cream...</h2>
    </header>
    <!--Navigation bar-->
    <div id="topnav">
      <nav class="nav">
        <a href="order.html">Order online</a>
        <a href="register.html">Register</a>
        <a href="index.html">Home</a>
        </ul>
    </div>
    <div class="tagline">
      <h2>Order</h2>
    </div>
    <!--Form-->
    <form id="orderForm">
      <p>First, select either delivery or pickup:</p>
      <label for="delivery">Delivery</label>
      <input type="radio" id="delivery" name="delivery" onchange=hidePickup(this) value="Delivery"><br>
      <label for="pickup">Pickup</label>
      <input type="radio" id="pickup" name="pickup" onchange=hideDelivery(this) value="Pickup"><br>
      <div id="pickupDiv">
        <br/>A's text</div>
      <div id="deliveryDiv">
        <br/>B's text</div>
  </div>
  </form>
  </div>
</body>

I tried to set the "visibility" to "hidden" in the HTML, and tried to use CSS and JS here to (unsuccessfully) hide both divs. As you can see, I have attemoted to solve this on my own, but am getting a bit lost. The radio buttons do work, if you select one then one of the divs does appear. But they’re visible when the page loads. HELP!

Answers

you are setting both display and visibility you need to address both of them. Although it’s a little odd that you are using both. display:none will not take up any space in the DOM while visibility takes up the space but doesn’t show the element.

function hideAAndB() {
  var pickupDiv = document.getElementById("pickupDiv");
  var deliveryDiv = document.getElementById("deliveryDiv");
  pickupDiv.style.display = "none";
  deliveryDiv.style.display = "none";
}

function hidePickup(x) { //Formally "hideA"

  if (x.checked) {
    document.getElementById("pickupDiv").style.visibility = "hidden";
    document.getElementById("pickupDiv").style.display = "block";
    document.getElementById("deliveryDiv").style.display = "block";
    document.getElementById("deliveryDiv").style.visibility = "visible";
    
  }
}

function hideDelivery(x) { //Formally "hideB"
  if (x.checked) 
  {
    document.getElementById("deliveryDiv").style.visibility = "hidden";
    document.getElementById("pickupDiv").style.visibility = "visible";
  }
}


function init() {
  hideAAndB;
}

window.onload = init;

#deliveryDiv,
#pickupDiv {
  display: none;
  visibility: hidden;
}

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

<head>
  <title>Order Page</title>
  <meta charset="utf-8" />
  <meta name="description" content="Order page for Sweet Life.">
  <meta name="keywords" content="study">
  <meta name="author" content="Anon">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/script1.js"></script>
</head>

<body>
  <div id="orderhtml">
    <!--Header-->
    <header>
      <h1 class="header" id="headerTop">Sweet Life</h1>
      <h2 class="header" id="headerBottom">Discover a world of ice cream...</h2>
    </header>
    <!--Navigation bar-->
    <div id="topnav">
      <nav class="nav">
        <a href="order.html">Order online</a>
        <a href="register.html">Register</a>
        <a href="index.html">Home</a>
        </ul>
    </div>
    <div class="tagline">
      <h2>Order</h2>
    </div>
    <!--Form-->
    <form id="orderForm">
      <p>First, select either delivery or pickup:</p>
      <label for="delivery">Delivery</label>
      <input type="radio" id="delivery" name="delivery" onchange=hidePickup(this) value="Delivery"><br>
      <label for="pickup">Pickup</label>
      <input type="radio" id="pickup" name="delivery" onchange=hideDelivery(this) value="Pickup"><br>
      <div id="pickupDiv">
        <br/>A's text</div>
      <div id="deliveryDiv">
        <br>B's text
  </div>
  </form>
  </div>
</body>

- GiovanniRiefolo
- October 12, 2023 at 7:38 pm
- 0 votes
0
First of all, pay attention to the name attribute: it should be the same for both radios or you will not be able to switch between them.

Then you can reduce the code to a single function that hides the div with id passed as an argument.

In this example, we use the showDiv() function to get the div that matches the id passed by the argument and toggle the .hidden which is set by default to both divs. This code can be adapted if you have more options or to pick the selection from a different set of divs.

Hope it helps!
const showDiv = (id) => { const divs = document.querySelectorAll('div') divs.forEach(div => { if(div.getAttribute('id') === id){ div.classList.remove('hidden') } else { if(!div.classList.contains('hidden')){ div.classList.add('hidden') } } }) }

div.hidden{ display: none }

<label> <input type="radio" name="choose_div" onchange="showDiv('a')"/> Div A </label> <label> <input type="radio" name="choose_div" onchange="showDiv('b')"/> Div B </label> <div id="a" class="hidden">Div A visible / Div B hidden</div> <div id="b" class="hidden">Div B visible / Div A hidden</div>
Login or Signup to reply.

You can do this in CSS with the pseudo-class :checked, with the attribute selector [value='something'] and the subsequent-sibling combinator ~.

If you use the CSS property display or visibility is up to you.

div#deliveryDiv {
  visibility: hidden;
}

div#pickupDiv {
  visibility: hidden;
}

input[value='delivery']:checked~div#deliveryDiv {
  visibility: visible;
}

input[value='pickup']:checked~div#pickupDiv {
  visibility: visible;
}

<form id="orderForm">
  <p>First, select either delivery or pickup:</p>
  <label for="delivery">Delivery</label>
  <input type="radio" id="delivery" name="option" value="delivery"><br>
  <label for="pickup">Pickup</label>
  <input type="radio" id="pickup" name="option" value="pickup"><br>
  <div id="pickupDiv">
    <br/>A's text</div>
  <div id="deliveryDiv">
    <br/>B's text</div>
</form>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to make a div disappear by default, then re-appear using radio buttons?

Answers