Styleguide

Accordion 

<div id="accordion" class="accordion">

    <div class="accordion-item">
        <div class="accordion-head title-class-h3 " id="accordion-head-1" data-toggle="collapse" data-target="#accordion-body-1" aria-expanded="true" aria-controls="accordion-body-1">
            <h3>Bildungsgänge</h3>
            <p>Hier finden Sie Bildungsangebote mit national anerkannten Abschlüssen. Ihr Ziel ist ein eidg. anerkannter Abschluss der Höheren Berufsbildung (eidg. Fachausweis, eidg. Diplom) oder ein Diplom von edupool.ch. Unsere Bildungsgänge bereiten Sie zuverlässig und professionell auf die zentralen Abschlussprüfungen vor. </p>
            <div class="accordion-head-toggle">
                <svg viewBox="0 0 94 94" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M47.166 1.16602V92.8327" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M92.9992 47H1.33252" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
        </div>
        <div class="accordion-body collapse show" id="accordion-body-1" aria-labelledby="accordion-head-1">
            <div class="accordion-body-inner">
                <div class="accordion-lead-text">Hier finden Sie Bildungsangebote mit national anerkannten Abschlüssen. Ihr Ziel ist ein eidg. anerkannter Abschluss der Höheren Berufsbildung (eidg. Fachausweis, eidg. Diplom) oder ein Diplom von edupool.ch. Unsere Bildungsgänge bereiten Sie zuverlässig und professionell auf die zentralen Abschlussprüfungen vor. </div>
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <div class="accordion-head title-class-h3 " id="accordion-head-2" data-toggle="collapse" data-target="#accordion-body-2" aria-expanded="false" aria-controls="accordion-body-2">
            <h3>Zertifikatskurse</h3>
            <p>Hier finden Sie Bildungsangebote mit schulspezifischem Abschluss. Ihr Ziel ist es, sich in wenigen Monaten praxisorientiert zu einem spezifischen Thema weiterzubilden. Sie lernen von Dozierenden, die selber erfolgreich in der Praxis tätig sind. Unser Credo: Heute lernen - morgen anwenden. Sie erlangen einen schulspezifischen Abschluss. </p>
            <div class="accordion-head-toggle">
                <svg viewBox="0 0 94 94" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M47.166 1.16602V92.8327" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M92.9992 47H1.33252" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
        </div>
        <div class="accordion-body collapse" id="accordion-body-2" aria-labelledby="accordion-head-2">
            <div class="accordion-body-inner">
                <div class="accordion-lead-text">Hier finden Sie Bildungsangebote mit schulspezifischem Abschluss. Ihr Ziel ist es, sich in wenigen Monaten praxisorientiert zu einem spezifischen Thema weiterzubilden. Sie lernen von Dozierenden, die selber erfolgreich in der Praxis tätig sind. Unser Credo: Heute lernen - morgen anwenden. Sie erlangen einen schulspezifischen Abschluss. </div>
            </div>
        </div>
    </div>

    <div class="accordion-item">
        <div class="accordion-head title-class-h3 " id="accordion-head-3" data-toggle="collapse" data-target="#accordion-body-3" aria-expanded="false" aria-controls="accordion-body-3">
            <h3>Seminare</h3>
            <p>Steigen Sie neu in ein Thema ein, frischen Sie Grundlagen auf, vertiefen Sie spezifische Fachinhalte und eignen Sie sich nützliche Kompetenzen an. Profitieren Sie von innovativen und kompakten Seminaren, die Ihnen nebst aktuellem Wissen auch Impulse für Ihren Berufsalltag verleihen, Ihre zeitlichen Ressourcen schonen und Ihr persönliches Netzwerk erweitern.</p>
            <div class="accordion-head-toggle">
                <svg viewBox="0 0 94 94" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M47.166 1.16602V92.8327" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M92.9992 47H1.33252" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
            </div>
        </div>
        <div class="accordion-body collapse" id="accordion-body-3" aria-labelledby="accordion-head-3">
            <div class="accordion-body-inner">
                <div class="accordion-lead-text">Steigen Sie neu in ein Thema ein, frischen Sie Grundlagen auf, vertiefen Sie spezifische Fachinhalte und eignen Sie sich nützliche Kompetenzen an. Profitieren Sie von innovativen und kompakten Seminaren, die Ihnen nebst aktuellem Wissen auch Impulse für Ihren Berufsalltag verleihen, Ihre zeitlichen Ressourcen schonen und Ihr persönliches Netzwerk erweitern.</div>
            </div>
        </div>
    </div>

</div>
 
{% if title_tag is empty %}
{% set title_tag = 'h3' %}
{% endif %}
{% set title_class = 'title-class-' ~ title_tag %}

{{ accordion_title  }}
<div id="{{accordion_id}}" class="accordion">

    {% for item in items %}

        {% if item.active %}
        <div class="accordion-item">
            <div class="accordion-head {{ title_class|raw }} {{ item.head_class }}" id="{{ item.head_id }}" data-toggle="collapse" data-target="#{{ item.body_id}}" aria-expanded="true" aria-controls="{{ item.body_id }}">
                <{{ title_tag|raw }}>{{ item.title|raw }}</{{ title_tag|raw }}>
                <p>{{ item.lead }}</p>
                <div class="accordion-head-toggle">
                    <svg viewBox="0 0 94 94" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M47.166 1.16602V92.8327" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M92.9992 47H1.33252" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </div>
            <div class="accordion-body collapse show" id="{{ item.body_id }}" aria-labelledby="{{ item.head_id }}">
                {% if item.content_mobile is defined %}
                  <div class="accordion-body-inner"><div class="accordion-lead-text">{{ item.lead }}</div> {{ item.content_mobile }}</div>
                {% else %}
                <div class="accordion-body-inner"><div class="accordion-lead-text">{{ item.lead }}</div> {{ item.content }}</div>
                 {% endif %}
            </div>
        </div>
        {% endif %}
        {% if item.active == false %}
        <div class="accordion-item">
            <div class="accordion-head {{ title_class|raw }} {{ item.head_class }}" id="{{ item.head_id }}" data-toggle="collapse" data-target="#{{ item.body_id}}" aria-expanded="false" aria-controls="{{ item.body_id }}">
                <{{ title_tag|raw }}>{{ item.title|raw }}</{{ title_tag|raw }}>
                <p>{{ item.lead }}</p>
                <div class="accordion-head-toggle">
                    <svg viewBox="0 0 94 94" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M47.166 1.16602V92.8327" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M92.9992 47H1.33252" stroke="#001B35" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </div>
            <div class="accordion-body collapse" id="{{ item.body_id }}" aria-labelledby="{{ item.head_id }}">
                {% if item.content_mobile is defined %}
                  <div class="accordion-body-inner"><div class="accordion-lead-text">{{ item.lead }}</div> {{ item.content_mobile }}</div>
                {% else %}
                  <div class="accordion-body-inner"><div class="accordion-lead-text">{{ item.lead }}</div> {{ item.content }}</div>
                {% endif %}
            </div>
        </div>
        {% endif %}

    {% endfor %}

</div>
 
{
  "accordion_title": "",
  "accordion_id": "accordion",
  "title_tag": "h3",
  "items": [
    {
      "item": null,
      "parent": "accordion",
      "head_id": "accordion-head-1",
      "head_class": "",
      "body_id": "accordion-body-1",
      "active": true,
      "title": "Bildungsgänge",
      "lead": "Hier finden Sie Bildungsangebote mit national anerkannten Abschlüssen. Ihr Ziel ist ein eidg. anerkannter Abschluss der Höheren Berufsbildung (eidg. Fachausweis, eidg. Diplom) oder ein Diplom von edupool.ch. Unsere Bildungsgänge bereiten Sie zuverlässig und professionell auf die zentralen Abschlussprüfungen vor. ",
      "content": "accordion item 1 content",
      "content_mobile": ""
    },
    {
      "item": null,
      "parent": "accordion",
      "head_id": "accordion-head-2",
      "head_class": "",
      "body_id": "accordion-body-2",
      "active": false,
      "title": "Zertifikatskurse",
      "lead": "Hier finden Sie Bildungsangebote mit schulspezifischem Abschluss. Ihr Ziel ist es, sich in wenigen Monaten praxisorientiert zu einem spezifischen Thema weiterzubilden. Sie lernen von Dozierenden, die selber erfolgreich in der Praxis tätig sind. Unser Credo: Heute lernen - morgen anwenden. Sie erlangen einen schulspezifischen Abschluss.  ",
      "content": "accordion item 2 content",
      "content_mobile": ""
    },
    {
      "item": null,
      "parent": "accordion",
      "head_id": "accordion-head-3",
      "head_class": "",
      "body_id": "accordion-body-3",
      "active": false,
      "title": "Seminare",
      "lead": "Steigen Sie neu in ein Thema ein, frischen Sie Grundlagen auf, vertiefen Sie spezifische Fachinhalte und eignen Sie sich nützliche Kompetenzen an. Profitieren Sie von innovativen und kompakten Seminaren, die Ihnen nebst aktuellem Wissen auch Impulse für Ihren Berufsalltag verleihen, Ihre zeitlichen Ressourcen schonen und Ihr persönliches Netzwerk erweitern.",
      "content": "accordion item 3 content",
      "content_mobile": ""
    }
  ]
}
  • Content: 
    .accordion {
  margin-left: -3rem;
  margin-right: -3rem;

  @include media-breakpoint-up(md) {
    margin-left: 0;
    margin-right: 0;
  }

  .accordion-item {
    background: $color-light-grey;

    &:hover {
      background: $color-light-grey;
    }

    margin-bottom: 1rem;
    @include media-breakpoint-up(lg) {
      margin-bottom: 3rem;
    }

    .accordion-head {
      padding: 1rem 3rem;
      position: relative;
      padding-right: 10rem;
      overflow: hidden;
      user-select: none;
      cursor: pointer;

      @include media-breakpoint-up(md) {
        padding: 1rem 1.5rem;
      }

      h3, h4 {
        margin-bottom: 0;
        @extend .title-small;
      }

      h3 {
        @include media-breakpoint-up(lg) {
          font-family: "Effra";
          font-weight: normal;
          font-style: normal;
          font-size: 4.8rem;
          line-height: 5.9rem;
          margin-bottom: 2rem;
        }
      }

      p {
        margin-bottom: 0;
        margin-top: 1rem;

        &:empty {
          display: none;
        }

        display: none;

        @include media-breakpoint-up(lg) {
          display: block;
          padding-right: 8rem;
        }
      }

      .accordion-head-toggle {
        //width: 6rem;
        height: 100%;
        height: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease-in-out;
        position: absolute;
        right: 1.5rem;
        top: 0.5rem;
        transform: rotate(0);

        @include media-breakpoint-up(lg) {
          height: 8rem;
          top: 1rem;
        }

        svg {
          height: 100%;
          width: auto;
        }
      }

      &[aria-expanded="true"] {
        background: darken($color-light-grey, 5%);

        .accordion-head-toggle {
          transform: rotate(-45deg);
        }

        + .accordion-body {
          background: $color-light-grey;
        }
      }

      // Style the "+"/"x" buttons for header.
      &.title-class-h3 {
        .accordion-head-toggle {
          @include media-breakpoint-up(lg) {

            svg {
              stroke-width: 2;
            }
          }
        }
      }
      &.title-class-h4 {
        .accordion-head-toggle {
          @include media-breakpoint-up(lg) {
            height: 3rem;
            top: 0.75rem;

            svg {
              stroke-width: 3;
            }
          }
        }
      }
    }

    .accordion-body {
      .accordion-body-inner {
        padding: 3rem 3rem;

        @include media-breakpoint-up(md) {
          padding: 3rem 1.5rem;
        }

        .accordion-lead-text {
          &:empty {
            display: none;
          }

          display: block;
          margin-bottom: 3rem;

          @include media-breakpoint-up(lg) {
            display: none;
          }
        }

        .media--image img {
          max-width: 100%;
          height: auto;
        }
      }

      table {
        th,
        th {
          border-color: #fff;
          border-bottom-width: 1px;
        }
      }
    }
  }
}
  • URL: /components/raw/accordion/accordion.scss
  • Filesystem Path: components/02-components/accordion/accordion.scss
  • Size: 3.1 KB

There are no notes for this item.