Container

Preview:

Configuration:

Output:

Vue component

            
<CheckboxCollapse :id="item.id" :labelText="item.labelText" v-for="item in checkCollapse" :key="item.id">
    <address>
        { { item.address } } <br>
        Email: { { item.email } } <br>
        Tlf.: { { item.phone } }
    </address>
</CheckboxCollapse>

export default {
    data() {
        return {
            checkCollapse: [
                {
                    id: "amager",
                    labelText: "Audi Amager",
                    address: "Englandsvej 437, 2770 Kastrup",
                    email: "service@audi-amager.dk",
                    phone: "70 70 10 25",
                },
                {
                    id: "gladsaxe",
                    labelText: "Audi Gladsaxe",
                    address: "Turbinevej 16, 2860 Søborg",
                    email: "service@audi-gladsaxe.dk",
                    phone: "70 70 10 25",
                },
                {
                    id: "horsholm",
                    labelText: "Audi Hørsholm",
                    address: "Holmevej 37, 2970 Hørsholm",
                    email: "service@audi-horsholm.dk",
                    phone: "70 70 10 25",
                },
            ],
        };
    },
};
            
        

Raw HTML

            
<div class="checkbox-collapse">
  <div class="checkbox-collapse-trigger">
    <div class="form-group font-weight-bold">
      <div class="checkbox">
        <input type="checkbox" id="checkbox-amager">
        <input type="hidden"> 
        <label for="checkbox-amager">
          <svg focusable="false" width="24" height="24">
            <use xlink:href="icons/custom-sprite-nuxt.svg#selected"></use>
          </svg>
          Audi Amager
        </label>
      </div>
    </div>
    <button>
      <svg focusable="false" width="24" height="24">
        <use xlink:href="icons/custom-sprite-nuxt.svg#chevron-down"></use>
      </svg>
    </button>
  </div>
  <div id="amager" class="checkbox-collapse-element">
    <address data-v-17bcf04c="">
      Englandsvej 437, 2770 Kastrup <br data-v-17bcf04c="">
      Email: service@audi-amager.dk <br data-v-17bcf04c="">
      Tlf.: 70 70 10 25
    </address>
  </div>
</div>
            
        

Comments

For js look in components/checkboxcollapse/CheckboxCollapse.vue