Barmer Fractal

Accordion: Toc 

<section class="o-accordion js-accordion-init ">

    <div class="m-accordion__panel js-accordion-panel accordion__panel--toc">

        <button class="a-btn accordion__panel__toggle js-accordion-toggle" type="button" aria-expanded="false"><span class="accordion__panel__label">Inhaltsverzeichnis</span><i class="a-icon icon--arrow-downward" aria-hidden="true"></i></button>

        <div class="accordion__panel__body js-accordion-body">
            <ul class="a-list-basic list-basic--toc">
                <li class="list__item list__item--level-1">
                    <a href="http://zdf.de" class="a-link ">
                        Der Aufbau des Rückens – die doppelte S-Form in einer langen Zeile, die hoffentlich umbricht
                    </a>

                </li>
                <li class="list__item list__item--level-2">
                    <a href="http://zdf.de" class="a-link ">
                        So sieht der Oberrücken aus
                    </a>

                </li>
                <li class="list__item list__item--level-2">
                    <a href="http://zdf.de" class="a-link ">
                        Auch der Unterrücken kann entzücken, vor allem wenn es sich dabei auch hier um eine lange Zeile handelt
                    </a>

                </li>
                <li class="list__item list__item--level-1">
                    <a href="http://zdf.de" class="a-link ">
                        Die Wirbel
                    </a>

                </li>
                <li class="list__item list__item--level-1">
                    <a href="http://zdf.de" class="a-link ">
                        Die Nerven der Wirbelsäule
                    </a>

                </li>
            </ul>

        </div>
    </div>

</section>
 
<section class="o-accordion js-accordion-init {{viewtypes.specifier}}">

  {{#if switches.hasAccordionActions }}
    {{#ifcond partials.panels.length '>' 5}}
      <div class="accordion__actions js-accordion-actions">
        {{ render '@button--default' partials.btnClose merge=true }}
        {{ render '@button--default' partials.btnOpen merge=true }}
      </div>
    {{/ifcond}}
  {{/if}}

  {{#each partials.panels as |panel|}}
    {{#if ../switches.isToc }}
      {{render '@accordion-panel--toc' panel merge=true}}
    {{else if ../switches.isLoginCode}}
      {{render '@accordion-panel--login-code' panel merge=true}}
    {{else if ../switches.isSearchFilter}}
      {{render '@accordion-panel--search-filter' panel merge=true}}
    {{else if ../switches.isReferences}}
      {{render '@accordion-panel--references-h2' panel merge=true}}
    {{else if ../switches.isForumPostsList}}
      {{render '@accordion-panel--forum-posts-list' panel merge=true}}
    {{else if ../switches.isBulletinBoardPostsLists}}
      {{render '@accordion-panel--bulletin-board-posts-list' panel merge=true}}
    {{else}}
      {{render '@accordion-panel' panel merge=true}}
    {{/if}}
  {{/each}}

</section>
 
{
  "switches": {
    "hasAccordionActions": true,
    "isToc": true,
    "isReferences": false,
    "isSearchFilter": false,
    "isForumPostsList": false,
    "isBulletinBoardPostsList": false
  },
  "viewtypes": {},
  "content": {},
  "partials": {
    "btnClose": {
      "switches": {
        "asLink": false,
        "hasIcon": true,
        "isHidden": true
      },
      "viewtypes": {
        "specifier": "js-accordion-close-all"
      },
      "content": {
        "ariaLabel": "Alle nachfolgenden Bereiche Schließen",
        "before": "<span class=\"accordion__actions__label\">",
        "label": "Alles schließen",
        "after": "</span>"
      },
      "partials": {
        "iconType": "icon--arrow-upward"
      }
    },
    "btnOpen": {
      "switches": {
        "asLink": false,
        "hasIcon": true,
        "isHidden": true
      },
      "viewtypes": {
        "specifier": "js-accordion-open-all"
      },
      "content": {
        "ariaLabel": "Alle nachfolgenden Bereiche öffnen",
        "before": "<span class=\"accordion__actions__label\">",
        "label": "Alles öffnen",
        "after": "</span>"
      },
      "partials": {
        "iconType": "icon--arrow-downward"
      }
    },
    "panels": [
      {
        "partials": {
          "toggle": {
            "content": {
              "label": "Inhaltsverzeichnis"
            }
          }
        }
      }
    ]
  }
}

No notes defined.