<h3>Flag documents</h3>
<div class="ac-custom ac-radio">
<input type="checkbox" name="radio11" id="radio11" value="Antigua and Barbuda">
<label for="radio11">Antigua and Barbuda</label>
<div class="flagblock">
Блок, который должен появится под бунктом при выборе верхнего пункта.
</div>
<br/>
<input type="checkbox" name="radio11" id="radio12" value="Bahamas">
<label for="radio12">Bahamas</label>
<div class="flagblock">
Блок, который должен появится под бунктом при выборе верхнего пункта.
</div>
<br/>
<input type="checkbox" name="radio11" id="radio13" value="Barbados">
<label for="radio13">Barbados</label>
<div class="flagblock">
Блок, который должен появится под бунктом при выборе верхнего пункта.
</div>
<br/>
<input type="checkbox" name="radio11" id="radio14" value="Belize">
<label for="radio14">Belize</label>
<div class="flagblock">
Блок, который должен появится под бунктом при выборе верхнего пункта.
</div>
<br/>
<input type="checkbox" name="radio11" id="radio15" value="Bermuda">
<label for="radio15">Bermuda</label>
<div class="flagblock">
Блок, который должен появится под бунктом при выборе верхнего пункта.
</div>
<br/>
<input type="checkbox" name="radio11" id="radio16" value="Cambodia">
<label for="radio16">Cambodia</label>
<div class="flagblock">
Блок, который должен появится под бунктом при выборе верхнего пункта.
</div>
<br/>
<input type="checkbox" name="radio11" id="radio17" value="Cayman Islands">
<label for="radio17">Cayman Islands</label>
<div class="flagblock">
Блок, который должен появится под бунктом при выборе верхнего пункта.
</div>
<br/>
</div>
.flagblock{
display: none;
}
const checkbox = document.querySelectorAll('input[type="checkbox"]'),
content = document.querySelectorAll('.flagblock'),
select = document.querySelector('.ac-custom');
function hideContent(i = 0) {
content[i].style.display = 'none';
}
function showContent(i = 0) {
content[i].style.display = 'block';
}
select.addEventListener('click', event => {
const target = event.target;
if (target.checked) {
checkbox.forEach((item, i) => {
if (target == item) {
showContent(i);
}
});
} else {
checkbox.forEach((item, i) => {
if (target == item) {
hideContent(i);
}
});
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.