Collapsed groups

Sample:

Code:

<style>
  fieldset:has([aria-expanded="true"]) div {
    display:block;
  }
</style>

<fieldset>
  <legend>
    <button type="button" class="toggle" aria-expanded="false">Country</button>
  </legend>

  <div hidden>
    <input type="checkbox" name="country" id="country_at" value="at">
    <label for="country_at">Austria</label>

    <input type="checkbox" name="country" id="country_ca" value="ca">
    <label for="country_ca">Canada</label>

    <input type="checkbox" name="country" id="country_us" value="us">
    <label for="country_us">USA</label>

    <input type="checkbox" name="country" id="country_de" value="de">
    <label for="country_de">Germany</label>

    <input type="checkbox" name="country" id="country_uk" value="uk">
    <label for="country_uk">United Kingdom</label>
  </div>
</fieldset>

<script>
  document.querySelector('.toggle').addEventListener('click', e => {
    const button = e.target.closest('[aria-expanded]')
    const isOpen = button.getAttribute('aria-expanded') === "false"

    if (button) {
      button.setAttribute('aria-expanded', isOpen)
    }
  })
</script>