altinn-designsystem/dist/patterns/02-organismer-50-ekspanderbart-panel-40-ekspanderbart-panel-trekkspill/02-organismer-50-ekspanderbart-panel-40-ekspanderbart-panel-trekkspill.markup-only.html

Altinn Design system based on Pattern Lab.

<!-- START: 02-organismer-50-ekspanderbart-panel-40-ekspanderbart-panel-trekkspill JS doc: toggleInstant.js -->
<div id="panelAccordion" class="a-panelAccordion" role="tablist">
  <!-- START: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel JS doc: togglePanel.js -->
  <div class="card a-accordion-card a-collapsePanel ">
    <div class="card-header a-js-index-heading a-collapsePanel-heading collapsed" id="myPanel1Header" role="tab">
      <a href="#" data-toggle="collapse" data-target="#myPanel1" aria-expanded="false" aria-controls="myPanel1">
        <!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
        <div class="a-iconText a-iconText-shadow a-iconText-large a-collapseBtn collapsed ">
          <div class="a-iconText-icon ">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="reg reg-lock  a-icon "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
          </div>
          <div class="a-iconText-text">
            <span class="a-iconText-text-small">Liten tekst</span>
            <span class="a-iconText-text-large">Stor tekst  </span>
          </div>
        </div>

        <!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->


      </a>
    </div>
    <div class="a-collapsePanel-body collapse" data-parent="#panelAccordion" role="tabpanel" aria-labelledby="myPanel1Header" id="myPanel1">
      <div class="card-block a-text a-collapsePanel-body-content a-collapseContent-delay">
        <div class="row">
          <div class="col-12">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cumque maxime, quam commodi doloremque adipisci deserunt atque non unde rem blanditiis quos veritatis suscipit, omnis animi labore nobis delectus eaque.
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- END: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel -->

  <!-- START: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel JS doc: togglePanel.js -->
  <div class="card a-accordion-card a-collapsePanel ">
    <div class="card-header a-js-index-heading a-collapsePanel-heading collapsed" id="myPanel2Header" role="tab">
      <a href="#" data-toggle="collapse" data-target="#myPanel2" aria-expanded="false" aria-controls="myPanel2">
        <!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
        <div class="a-iconText a-iconText-shadow a-iconText-large a-collapseBtn collapsed ">
          <div class="a-iconText-icon ">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="reg reg-other  a-icon "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
          </div>
          <div class="a-iconText-text">
            <span class="a-iconText-text-large">Bare stor tekst  </span>
          </div>
        </div>

        <!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->


      </a>
    </div>
    <div class="a-collapsePanel-body collapse" data-parent="#panelAccordion" role="tabpanel" aria-labelledby="myPanel2Header" id="myPanel2">
      <div class="card-block a-text a-collapsePanel-body-content a-collapseContent-delay">
        <div class="row">
          <div class="col-12">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cumque maxime, quam commodi doloremque adipisci deserunt atque non unde rem blanditiis quos veritatis suscipit, omnis animi labore nobis delectus eaque.
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- END: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel -->

  <!-- START: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel JS doc: togglePanel.js -->
  <div class="card a-accordion-card a-collapsePanel ">
    <div class="card-header a-js-index-heading a-collapsePanel-heading collapsed" id="myPanel3Header" role="tab">
      <a href="#" data-toggle="collapse" data-target="#myPanel3" aria-expanded="false" aria-controls="myPanel3">
        <!-- START: 01-molekyler-00-tekst-30-ikon-tekst -->
        <div class="a-iconText a-iconText-shadow a-iconText-large a-collapseBtn collapsed ">
          <div class="a-iconText-icon ">
            <!-- START: 00-atomer-09-bilder-og-media-15-ikon -->
            <i class="reg reg-document  a-icon "></i>


            <!-- END: 00-atomer-09-bilder-og-media-15-ikon -->
          </div>
          <h2 class="a-iconText-text mb-0">
            <span class="a-iconText-text-large">Tittel (h2)  </span>
          </h2>
        </div>

        <!-- END: 01-molekyler-00-tekst-30-ikon-tekst -->


      </a>
    </div>
    <div class="a-collapsePanel-body collapse" data-parent="#panelAccordion" role="tabpanel" aria-labelledby="myPanel3Header" id="myPanel3">
      <div class="card-block a-text a-collapsePanel-body-content a-collapseContent-delay">
        <div class="row">
          <div class="col-12">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus cumque maxime, quam commodi doloremque adipisci deserunt atque non unde rem blanditiis quos veritatis suscipit, omnis animi labore nobis delectus eaque.
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- END: 02-organismer-50-ekspanderbart-panel-30-ekspanderbart-panel -->

</div>

<!-- END: 02-organismer-50-ekspanderbart-panel-40-ekspanderbart-panel-trekkspill -->