Clever Component Library

Accordion 

<div class="accordion js-accordion">
    <h3 class="heading heading--small accordion-heading">Installation af ladeboksen</h3>
    <p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>
    <h3 class="heading heading--small accordion-heading">Lad op derhjemme</h3>
    <p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>
    <h3 class="heading heading--small accordion-heading">Få 24/7 support</h3>
    <p>There's two paragraphs here.</p>
    <p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>
</div>
 
<div class="accordion js-accordion">
	{% for panel in accordionPanels %}
		<{{ headingLevel|default('h3') }} class="heading heading--small accordion-heading">{{ panel.heading|nl2br|raw }}</{{ headingLevel|default('h3') }}>
		{{ panel.body }}
	{% endfor %}
</div>
 
{
  "accordionPanels": [
    {
      "heading": "Installation af ladeboksen",
      "body": "<p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>"
    },
    {
      "heading": "Lad op derhjemme",
      "body": "<p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>"
    },
    {
      "heading": "Få 24/7 support",
      "body": "<p>There's two paragraphs here.</p><p>Vores erfarne elektrikere sørger for en korrekt og sikker installation hjemme hos dig, som samtidigt opfylder de krav, bilproducenterne stiller i deres egne garantier.</p>"
    }
  ]
}

Accordion

Version 2

  • Can be used in any component with child components (e.g. Banner)
  • Unlimited accordion items