Barmer Fractal

Accordion: Search Filter 

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

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

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

        <div class="accordion__panel__body js-accordion-body">

            <div class="m-list ">

                <ul class="a-list-basic list--filters">
                    <li class="list__item ">
                        <a class="a-filter filter--button " href="" title="" data-filter-id="1000">
                            <span class="filter__text">Unsere Leistungen (1)</span></a>

                    </li>
                    <li class="list__item ">
                        <a class="a-filter filter--button is-active" href="" title="" data-filter-id="1001">
                            <span class="sr-only">Zurzeit ausgewählt: </span>
                            <span class="filter__text">Gesundheit Verstehen (12)</span></a>

                    </li>
                    <li class="list__item ">
                        <a class="a-filter filter--button " href="" title="" data-filter-id="1002">
                            <span class="filter__text">Kursangebote (2)</span></a>

                    </li>
                    <li class="list__item ">
                        <a class="a-filter filter--button " href="" title="" data-filter-id="1003">
                            <span class="filter__text">Firmenangebote (13)</span></a>

                    </li>
                    <li class="list__item ">
                        <a class="a-filter filter--button " href="" title="" data-filter-id="1004">
                            <span class="filter__text">Forenbeiträge (13)</span></a>

                    </li>
                    <li class="list__item ">
                        <a class="a-filter filter--button " href="" title="" data-filter-id="1005">
                            <span class="filter__text">Über uns (5)</span></a>

                    </li>
                    <li class="list__item ">
                        <a class="a-filter filter--button " href="" title="" data-filter-id="1006">
                            <span class="filter__text">Meine Barmer (38)</span></a>

                    </li>
                </ul>

            </div>

            <div class="m-list ">

                <ul class="a-list-basic list--filters">
                    <li class="list__item ">
                        <a class="a-filter filter--checkbox" href="" title="" data-filter-id="1007" role="checkbox" aria-checked="false">
                            <span class="filter__checkbox" aria-hidden="true"></span>
                            <span class="filter__text">Webartikel</span></a>

                    </li>
                    <li class="list__item ">
                        <a class="a-filter filter--checkbox" href="" title="" data-filter-id="1008" role="checkbox" aria-checked="true">
                            <span class="filter__checkbox" aria-hidden="true"></span>
                            <span class="filter__text">Downloads</span></a>

                    </li>
                </ul>

            </div>

            <a class="a-btn btn--clear-filter" href="" title="">
                Auswahl aufheben<i class="a-icon icon--close" aria-hidden="true"></i>
            </a>

        </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": false,
    "isReferences": false,
    "isSearchFilter": true,
    "isForumPostsList": false,
    "isBulletinBoardPostsList": false
  },
  "viewtypes": {
    "specifier": "accordion--search-filter js-accordion--search-filter-init"
  },
  "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": "Suchergebnisse eingrenzen"
            }
          }
        }
      }
    ]
  }
}

No notes defined.