Woocommerce Checkout page

1 Views

I have a checkbox on the checkoutpage in my woocommerce site. I want to write a function where if this checkbox is checked then a div will dropdown with additional information.

The checkbox has an id of #unattended

Read More

However I have no idea where to start : /

Anyhelp would be greatly appreciated

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Yeah, good question. Here’s an example (I commented the code) to show you how it’s done:

    function showInfo(box) {

  if (box.checked == true) { // if the checkbox is checked

    document.getElementById('information').className = "show";
    // show the div

  } else if (box.checked == false) { // if it's not

    document.getElementById('information').className = "hide";
    // hide the div

  }

}
    #information { /* This styles the div and makes it in the center of the page */
  position: fixed;
  display: block;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  left: 0;
  right: 0;
  margin: auto;
}
.hide { /* these are the styles for when the div is hidden */
  top: -20px;
  transition: top 0.6s;
}
.show { /* these are the styles for when the div is visible */
  top: 0;
  transition: top 0.6s;
}
    <div id="information" class="hide">Put lots and lots and lots and lots of information here.</div><br>

<input type="checkbox" id="unattended" onclick="showInfo(this)" />

    I hope that this helps you out! If you need additional help, please comment below.