Accordion: Default

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">
    <div class="dso-accordion-section">
        <div class="dso-section-handle"><a href="#">Oprit (div)

            </a>
        </div>
    </div>
    <div class="dso-accordion-section dso-open">
        <h1 class="dso-section-handle"><a href="#">Woning (h1)

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

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Woning (h1)</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 dso-success">
        <h2 class="dso-section-handle"><a href="#">
                <span class="sr-only">
                    succes:
                </span>
                Bouwwerkzaamheden (h2)

            </a>
        </h2>
    </div>
    <div class="dso-accordion-section dso-warning dso-open dso-nested-accordion">
        <h3 class="dso-section-handle"><a href="#">
                <span class="sr-only">
                    waarschuwing:
                </span>
                Plaats van het bouwwerk (h3)

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

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Plaats van het bouwwerk (h3)</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 class="dso-accordion">
                <div class="dso-accordion-section">
                    <div class="dso-section-handle">
                        <a href="#">
                            Woning (div)

                        </a>
                    </div>

                </div>
                <div class="dso-accordion-section dso-success dso-open">
                    <h2 class="dso-section-handle">
                        <a href="#">

                            <span class="sr-only">
                                succes:
                            </span>
                            Bouwwerkzaamheden (h2)

                        </a>
                    </h2>

                    <div class="dso-section-body">

                        <div class="dso-rich-content">
                            <p>Dit is een geneste accordion. De inhoud is van <strong>Bouwwerkzaamheden (h2)</strong>. Zie de <em>Notes</em> van dit component.</p>

                        </div>

                    </div>

                </div>
                <div class="dso-accordion-section dso-warning">
                    <h3 class="dso-section-handle">
                        <a href="#">

                            <span class="sr-only">
                                waarschuwing:
                            </span>
                            Plaats van het bouwwerk (h3)

                        </a>
                    </h3>

                </div>
                <div class="dso-accordion-section dso-info">
                    <h4 class="dso-section-handle">
                        <a href="#">

                            <span class="sr-only">
                                info:

                            </span>
                            Afmetingen van het bouwwerk (h4)

                        </a>
                    </h4>

                </div>
                <div class="dso-accordion-section dso-danger">
                    <h5 class="dso-section-handle">
                        <a href="#">

                            <span class="sr-only">
                                gevaar:
                            </span>
                            Extra werkzaamheden (h5)

                        </a>
                    </h5>

                </div>
            </div>

        </div>
    </div>
    <div class="dso-accordion-section dso-info">
        <h4 class="dso-section-handle"><a href="#">
                <span class="sr-only">
                    info:

                </span>
                Afmetingen van het bouwwerk (h4)

            </a>
        </h4>
    </div>
    <div class="dso-accordion-section dso-danger">
        <h5 class="dso-section-handle"><a href="#">
                <span class="sr-only">
                    gevaar:
                </span>
                Extra werkzaamheden (h5)

                <span class="dso-status">5 van 8 beantwoord</span>

            </a>
        </h5>
    </div>
    <div class="dso-accordion-section dso-warning dso-open">
        <h5 class="dso-section-handle"><a href="#">
                <span class="sr-only">
                    waarschuwing:
                </span>
                Optionele werkzaamheden (h5)

                <span class="dso-status">6 van 8 beantwoord</span>

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

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Optionele werkzaamheden (h5)</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">
        <h5 class="dso-section-handle"><a href="#">Bijgevoegde werkzaamheden (h5)

                <span class="dso-attachments">2 <span class="sr-only">bijlagen</span></span>

            </a>
        </h5>
    </div>
    <div class="dso-accordion-section">
        <h5 class="dso-section-handle"><a href="#">Afsluitende werkzaamheden (h5)

                <span class="dso-status">7 van 8 beantwoord</span>

            </a>
        </h5>
    </div>
    <div class="dso-accordion-section dso-open">
        <h5 class="dso-section-handle"><a href="#">Evaluatie werkzaamheden (h5)

                <span class="dso-attachments">1 <span class="sr-only">bijlage</span></span>

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

            <div class="dso-rich-content">
                <p>Dit is de inhoud van <strong>Evaluatie werkzaamheden (h5)</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>


  {%- 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: Oprit (div)
    id: panel_oprit
  - title: Woning (h1)
    id: panel1
    open: true
    header: h1
    richContent: >
      <p>Dit is de inhoud van <strong>Woning (h1)</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>
  - title: Bouwwerkzaamheden (h2)
    id: panel2
    state: success
    header: h2
  - title: Plaats van het bouwwerk (h3)
    id: panel3
    state: warning
    header: h3
    richContent: >
      <p>Dit is de inhoud van <strong>Plaats van het bouwwerk (h3)</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
    sections:
      - title: Woning (div)
        id: panel1
      - title: Bouwwerkzaamheden (h2)
        id: panel2
        open: true
        state: success
        header: h2
        richContent: >
          <p>Dit is een geneste accordion. De inhoud is van
          <strong>Bouwwerkzaamheden (h2)</strong>. Zie de <em>Notes</em> van dit
          component.</p>
      - title: Plaats van het bouwwerk (h3)
        id: panel3
        state: warning
        header: h3
      - title: Afmetingen van het bouwwerk (h4)
        id: panel4
        state: info
        header: h4
      - title: Extra werkzaamheden (h5)
        id: panel5
        state: danger
        header: h5
  - title: Afmetingen van het bouwwerk (h4)
    id: panel4
    state: info
    header: h4
  - title: Extra werkzaamheden (h5)
    id: panel5
    state: danger
    header: h5
    status: 5 van 8 beantwoord
  - title: Optionele werkzaamheden (h5)
    id: panel6
    state: warning
    header: h5
    richContent: >
      <p>Dit is de inhoud van <strong>Optionele werkzaamheden (h5)</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
    status: 6 van 8 beantwoord
  - title: Bijgevoegde werkzaamheden (h5)
    id: panel7
    header: h5
    attachments: 2
  - title: Afsluitende werkzaamheden (h5)
    id: panel8
    header: h5
    status: 7 van 8 beantwoord
  - title: Evaluatie werkzaamheden (h5)
    id: panel8
    header: h5
    attachments: 1
    richContent: >
      <p>Dit is de inhoud van <strong>Evaluatie werkzaamheden (h5)</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