<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);
        }
      });
    }
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.