<div class="if panel is-expandable">
  <div
    class="if title"
    aria-expanded="false"
    aria-controls="exp-main-1"
    tabindex="0"
  >
    Expelliarmus
  </div>
  <div class="if content" role="region" id="exp-main-1" tabindex="-1">
    <p class="if text lead center">
      Villaförsäkringen gäller för dig, de du bor med, de saker du äger, hyr
      eller lånar, byggnaderna och tomten. Försäkringen är en trygghet för dig
      som äger hus.
    </p>
    <p class="if text body center">
      En husägare kan råka ut för olika händelser. Det kan vara inbrott, brand-
      eller vattenskada eller att värmepannan går sönder. I villaförsäkringen
      ingår reseskydd och försäkring för de personliga saker du och familjen
      äger, hyr eller lånar. Villaförsäkringen kan du köpa till villa, radhus
      eller kedjehus.
    </p>
    <div class="if input-wrapper center">
      <button type="button" class="if button primary large">
        Jämför våra villaförsäkringar
      </button>
    </div>
  </div>
</div>

<script src="/assets/panel.iife.js"></script>
<script>
  const expandables = document.querySelectorAll('.if.panel.is-expandable');

  expandables.forEach((expandable) => {
    new IDSPanel.Panel(expandable);
  });
</script>

import { Panel as IDSPanel } from '@ids-js/panel';

const expandables = document.querySelectorAll('.if.panel.is-expandable');

expandables.forEach((expandable) => {
  new IDSPanel(expandable);
});