Woocommerce Оформить заказ

Question

У меня есть флажок на странице оформления на моем сайте woocommerce. Я хочу написать функцию, в которой, если этот флажок установлен, тогда div будет раскрываться с дополнительной информацией.

Флажок имеет идентификатор #unattended

Однако я понятия не имею, где начать:/

Anyhelp бы весьма признателен

Answer 1

Да, хороший вопрос. Вот пример (я прокомментировал код), чтобы показать вам, как это делается:

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)" />

Я надеюсь, что это поможет вам! Если вам нужна дополнительная помощь, прокомментируйте это ниже.