Accordion: Compact

Een accordion (.dso-accordion) bestaat uit secties (.dso-accordion-section). Een sectie heeft een handle (.dso-section-handle) en body (.dso-section-body).

Een accordion section in de state “open” moet een .dso-open class op .dso-accordion-section krijgen. Dit zorgt het “chevron-up”-icoon. Ook als het .dso-accordion-section element niet in het DOM staat, moet een open accordion altijd .dso-open krijgen.

Er zijn 4 modifiers: .dso-succes, .dso-warning, .dso-info en .dso-danger die op de .dso-accordion-section kunnen.

Het is mogelijk om een accordion in een accordion te plaatsen. Er moet dan wel .dso-nested-accordion op de .dso-accordion-section worden gezet.

<div class="dso-accordion dso-accordion-compact">
    <div class="dso-accordion-section dso-open">
        <h3 class="dso-section-handle">
            <button type="button">
                Sectie titel (active)

                </a>
        </h3>
        <div class="dso-section-body">

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Sectie titel (active)</strong></p>
                <p>Semantisch klopt deze pagina niet, maar om de styling voor de verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle varianten in het DOM (<code>div</code>, <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>

            </div>

        </div>
    </div>
    <div class="dso-accordion-section">
        <h3 class="dso-section-handle">
            <button type="button">
                Sectie titel

                </a>
        </h3>
    </div>
    <div class="dso-accordion-section">
        <h3 class="dso-section-handle">
            <button type="button">
                Sectie titel

                </a>
        </h3>
    </div>
    <div class="dso-accordion-section">
        <h3 class="dso-section-handle">
            <button type="button">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula, ipsum eu porttitor cursus, metus ante ultricies quam, quis egestas urna justo a quam.

                </a>
        </h3>
    </div>
</div>

  {%- for section in sections -%}
    

      <{{ section.header if section.header else 'div' }} class="dso-section-handle">
      {%- if section.type === 'button' %}
        
        
      {% else %}
        
        
      {%- endif %}

      {%- if section.open %}
        

          {% if section.richContent %}
            

              {{ section.richContent | safe }}
            

          {% endif %}
          {% if section.form %}
            {% render '@form', section.form %}
          {% endif %}
          {%- if section.sections %}
            

              {%- for subsection in section.sections -%}
                

                  <{{ subsection.header if subsection.header else 'div' }} class="dso-section-handle">
                  {%- if section.type === 'button' %}
                    
                    
                  {% else %}
                    
                    
                  {% endif %}

                  {% if subsection.open %}
                    

                      {% if subsection.richContent %}
                        

                          {{ subsection.richContent | safe }}
                        

                      {% endif %}
                      {% if subsection.form %}
                        {% render '@form', subsection.form %}
                      {% endif %}
                    

                  {% endif %}
                

              {%- endfor %}
            

          {% endif %}
        

      {%- endif %}
    

  {%- endfor %}

sections:
  - title: Sectie titel (active)
    id: panel1
    header: h3
    type: button
    richContent: >
      <p>Dit is de inhoud van <strong>Sectie titel (active)</strong></p>

      <p>Semantisch klopt deze pagina niet, maar om de styling voor de
      verschillende <code>.dso-accordion.handle</code>s te waarborgen staan alle
      varianten in het DOM (<code>div</code>, <code>h1</code>, <code>h2</code>,
      <code>h3</code>, <code>h4</code>, <code>h5</code>)</p>
    open: true
  - title: Sectie titel
    id: panel2
    header: h3
    type: button
  - title: Sectie titel
    id: panel3
    header: h3
    type: button
  - title: >-
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
      vehicula, ipsum eu porttitor cursus, metus ante ultricies quam, quis
      egestas urna justo a quam.
    id: panel4
    header: h3
    type: button
modifiers: dso-accordion-compact