Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Accordion 

<div class="accordion ">
    <div class="accordion__panel">
        <input id="panel_0" type="checkbox" name="panel">
        <label class="accordion__label" for="panel_0">Technische Infos / Broschüren</label>
        <div class="accordion__content tab_0">
            <h4>Accordion heading</h4>
            <p>Accordion text</p>
            <div class="grid-x grid-margin-x grid-margin-y">
                <div class="small-12 medium-4 cell"><a class="link__download" href="#">
                        <div class=" download ">
                            <div class="download__content">
                                <span class="download__date ">10.01.12</span>
                                <span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
                                <div class="download__text">
                                    <p>Here you get newest information about best drinks ever!</p>
                                </div>

                            </div>
                            <div class="download__cta">
                                <div class="download__mime">
                                    <div class=" media ">
                                        <img class="media__item" src="/images/mime/download_pdf.svg" alt=>
                                    </div>

                                </div>
                                <p class="download__info">
                                    <span class="download__link link">DOWNLOAD</span>
                                    <br>(PDF, 137 KB)
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="small-12 medium-4 cell"><a class="link__download" href="#">
                        <div class=" download ">
                            <div class="download__content">
                                <span class="download__date ">10.01.12</span>
                                <span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
                                <div class="download__text">
                                    <p>Here you get newest information about best drinks ever!</p>
                                </div>

                            </div>
                            <div class="download__cta">
                                <div class="download__mime">
                                    <div class=" media ">
                                        <img class="media__item" src="/images/mime/download_pdf.svg" alt=>
                                    </div>

                                </div>
                                <p class="download__info">
                                    <span class="download__link link">DOWNLOAD</span>
                                    <br>(PDF, 137 KB)
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="small-12 medium-4 cell"><a class="link__download" href="#">
                        <div class=" download ">
                            <div class="download__content">
                                <span class="download__date ">10.01.12</span>
                                <span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
                                <div class="download__text">
                                    <p>Here you get newest information about best drinks ever!</p>
                                </div>

                            </div>
                            <div class="download__cta">
                                <div class="download__mime">
                                    <div class=" media ">
                                        <img class="media__item" src="/images/mime/download_pdf.svg" alt=>
                                    </div>

                                </div>
                                <p class="download__info">
                                    <span class="download__link link">DOWNLOAD</span>
                                    <br>(PDF, 137 KB)
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion__panel">
        <input id="panel_1" type="checkbox" name="panel">
        <label class="accordion__label" for="panel_1">Montageanleitungen</label>
        <div class="accordion__content tab_1">
            <div class="grid-x grid-margin-x grid-margin-y">
                <div class="small-12 medium-4 cell"><a class="link__download" href="#">
                        <div class=" download ">
                            <div class="download__content">
                                <span class="download__date ">10.01.12</span>
                                <span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
                                <div class="download__text">
                                    <p>Here you get newest information about best drinks ever!</p>
                                </div>

                            </div>
                            <div class="download__cta">
                                <div class="download__mime">
                                    <div class=" media ">
                                        <img class="media__item" src="/images/mime/download_pdf.svg" alt=>
                                    </div>

                                </div>
                                <p class="download__info">
                                    <span class="download__link link">DOWNLOAD</span>
                                    <br>(PDF, 137 KB)
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="small-12 medium-4 cell"><a class="link__download" href="#">
                        <div class=" download ">
                            <div class="download__content">
                                <span class="download__date ">10.01.12</span>
                                <span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
                                <div class="download__text">
                                    <p>Here you get newest information about best drinks ever!</p>
                                </div>

                            </div>
                            <div class="download__cta">
                                <div class="download__mime">
                                    <div class=" media ">
                                        <img class="media__item" src="/images/mime/download_pdf.svg" alt=>
                                    </div>

                                </div>
                                <p class="download__info">
                                    <span class="download__link link">DOWNLOAD</span>
                                    <br>(PDF, 137 KB)
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="small-12 medium-4 cell"><a class="link__download" href="#">
                        <div class=" download ">
                            <div class="download__content">
                                <span class="download__date ">10.01.12</span>
                                <span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
                                <div class="download__text">
                                    <p>Here you get newest information about best drinks ever!</p>
                                </div>

                            </div>
                            <div class="download__cta">
                                <div class="download__mime">
                                    <div class=" media ">
                                        <img class="media__item" src="/images/mime/download_pdf.svg" alt=>
                                    </div>

                                </div>
                                <p class="download__info">
                                    <span class="download__link link">DOWNLOAD</span>
                                    <br>(PDF, 137 KB)
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion__panel">
        <input id="panel_2" type="checkbox" name="panel">
        <label class="accordion__label" for="panel_2">Leistungsdiagramme</label>
        <div class="accordion__content tab_2">
            <div class="grid-x grid-margin-x grid-margin-y">
                <div class="small-12 medium-4 cell"><a class="link__download" href="#">
                        <div class=" download ">
                            <div class="download__content">
                                <span class="download__date ">10.01.12</span>
                                <span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
                                <div class="download__text">
                                    <p>Here you get newest information about best drinks ever!</p>
                                </div>

                            </div>
                            <div class="download__cta">
                                <div class="download__mime">
                                    <div class=" media ">
                                        <img class="media__item" src="/images/mime/download_pdf.svg" alt=>
                                    </div>

                                </div>
                                <p class="download__info">
                                    <span class="download__link link">DOWNLOAD</span>
                                    <br>(PDF, 137 KB)
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="small-12 medium-4 cell"><a class="link__download" href="#">
                        <div class=" download ">
                            <div class="download__content">
                                <span class="download__date ">10.01.12</span>
                                <span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
                                <div class="download__text">
                                    <p>Here you get newest information about best drinks ever!</p>
                                </div>

                            </div>
                            <div class="download__cta">
                                <div class="download__mime">
                                    <div class=" media ">
                                        <img class="media__item" src="/images/mime/download_pdf.svg" alt=>
                                    </div>

                                </div>
                                <p class="download__info">
                                    <span class="download__link link">DOWNLOAD</span>
                                    <br>(PDF, 137 KB)
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="small-12 medium-4 cell"><a class="link__download" href="#">
                        <div class=" download ">
                            <div class="download__content">
                                <span class="download__date ">10.01.12</span>
                                <span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
                                <div class="download__text">
                                    <p>Here you get newest information about best drinks ever!</p>
                                </div>

                            </div>
                            <div class="download__cta">
                                <div class="download__mime">
                                    <div class=" media ">
                                        <img class="media__item" src="/images/mime/download_pdf.svg" alt=>
                                    </div>

                                </div>
                                <p class="download__info">
                                    <span class="download__link link">DOWNLOAD</span>
                                    <br>(PDF, 137 KB)
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion__panel">
        <input id="panel_3" type="checkbox" name="panel">
        <label class="accordion__label" for="panel_3">Zertikate</label>
        <div class="accordion__content tab_3">
            <div class="grid-x grid-margin-x grid-margin-y">
                <div class="small-12 medium-4 cell"><a class="link__download" href="#">
                        <div class=" download ">
                            <div class="download__content">
                                <span class="download__date ">10.01.12</span>
                                <span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
                                <div class="download__text">
                                    <p>Here you get newest information about best drinks ever!</p>
                                </div>

                            </div>
                            <div class="download__cta">
                                <div class="download__mime">
                                    <div class=" media ">
                                        <img class="media__item" src="/images/mime/download_pdf.svg" alt=>
                                    </div>

                                </div>
                                <p class="download__info">
                                    <span class="download__link link">DOWNLOAD</span>
                                    <br>(PDF, 137 KB)
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="small-12 medium-4 cell"><a class="link__download" href="#">
                        <div class=" download ">
                            <div class="download__content">
                                <span class="download__date ">10.01.12</span>
                                <span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
                                <div class="download__text">
                                    <p>Here you get newest information about best drinks ever!</p>
                                </div>

                            </div>
                            <div class="download__cta">
                                <div class="download__mime">
                                    <div class=" media ">
                                        <img class="media__item" src="/images/mime/download_pdf.svg" alt=>
                                    </div>

                                </div>
                                <p class="download__info">
                                    <span class="download__link link">DOWNLOAD</span>
                                    <br>(PDF, 137 KB)
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="small-12 medium-4 cell"><a class="link__download" href="#">
                        <div class=" download ">
                            <div class="download__content">
                                <span class="download__date ">10.01.12</span>
                                <span class="download__headline h4">Drinks menu REHAU ART 01/2015</span>
                                <div class="download__text">
                                    <p>Here you get newest information about best drinks ever!</p>
                                </div>

                            </div>
                            <div class="download__cta">
                                <div class="download__mime">
                                    <div class=" media ">
                                        <img class="media__item" src="/images/mime/download_pdf.svg" alt=>
                                    </div>

                                </div>
                                <p class="download__info">
                                    <span class="download__link link">DOWNLOAD</span>
                                    <br>(PDF, 137 KB)
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="accordion {{#if tabs}}tabs{{/if}}">
  {{#if tabs}}
    {{#each items}}
    <input type="radio" name="tabs" class="tab__selector tab_{{@index}}" id="tab_{{@index}}" {{#if @first}}checked{{/if}}>
    {{/each}}
    <ul class="tabs__tabs tabs_4">
      {{#each items}}
      <li class="tab_{{@index}}"><label for="tab_{{@index}}" class="tab__title">{{{title}}}</label></li>
      {{/each}}
    </ul>
  {{/if}}
  {{#each items}}
    <div class="accordion__panel">
      <input id="panel_{{@index}}" type="checkbox" name="panel">
      <label class="accordion__label" for="panel_{{@index}}">{{{title}}}</label>
      <div class="accordion__content tab_{{@index}}">
        {{#heading}}
          <h4>{{{.}}}</h4>
        {{/heading}}
        {{#text}}
          <p>{{{.}}}</p>
        {{/text}}
        {{#downloads}}
          <div class="grid-x grid-margin-x grid-margin-y">
            {{#downloadItems}}
              <div class="small-12 medium-4 cell">{{render '@molecules-download'}}</div>
            {{/downloadItems}}
          </div>
        {{/downloads}}
      </div>
    </div>
  {{/each}}
</div>
 
{
  "tabs": null,
  "items": [
    {
      "title": "Technische Infos / Broschüren",
      "classes": "is-active",
      "heading": "Accordion heading",
      "text": "Accordion text",
      "downloads": {
        "downloadItems": [
          {
            "date": "12.10.2017",
            "headline": "RAUTHERM SPEED",
            "text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
            "download": "DOWNLOAD",
            "pdf": "(PDF, 137 KB)",
            "small": "../../images/mime/download_pdf.svg"
          },
          {
            "date": "12.10.2017",
            "headline": "RAUTHERM SPEED",
            "text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
            "download": "DOWNLOAD",
            "pdf": "(PDF, 137 KB)",
            "small": "../../images/mime/download_pdf.svg"
          },
          {
            "date": "12.10.2017",
            "headline": "RAUTHERM SPEED",
            "text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
            "download": "DOWNLOAD",
            "pdf": "(PDF, 137 KB)",
            "small": "../../images/mime/download_pdf.svg"
          }
        ]
      }
    },
    {
      "title": "Montageanleitungen",
      "downloads": {
        "downloadItems": [
          {
            "date": "12.10.2017",
            "headline": "RAUTHERM SPEED",
            "text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
            "download": "DOWNLOAD",
            "pdf": "(PDF, 137 KB)",
            "small": "../../images/mime/download_pdf.svg"
          },
          {
            "date": "12.10.2017",
            "headline": "RAUTHERM SPEED",
            "text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
            "download": "DOWNLOAD",
            "pdf": "(PDF, 137 KB)",
            "small": "../../images/mime/download_pdf.svg"
          },
          {
            "date": "12.10.2017",
            "headline": "RAUTHERM SPEED",
            "text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
            "download": "DOWNLOAD",
            "pdf": "(PDF, 137 KB)",
            "small": "../../images/mime/download_pdf.svg"
          }
        ]
      }
    },
    {
      "title": "Leistungsdiagramme",
      "downloads": {
        "downloadItems": [
          {
            "date": "12.10.2017",
            "headline": "RAUTHERM SPEED",
            "text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
            "download": "DOWNLOAD",
            "pdf": "(PDF, 137 KB)",
            "small": "../../images/mime/download_pdf.svg"
          },
          {
            "date": "12.10.2017",
            "headline": "RAUTHERM SPEED",
            "text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
            "download": "DOWNLOAD",
            "pdf": "(PDF, 137 KB)",
            "small": "../../images/mime/download_pdf.svg"
          },
          {
            "date": "12.10.2017",
            "headline": "RAUTHERM SPEED",
            "text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
            "download": "DOWNLOAD",
            "pdf": "(PDF, 137 KB)",
            "small": "../../images/mime/download_pdf.svg"
          }
        ]
      }
    },
    {
      "title": "Zertikate",
      "downloads": {
        "downloadItems": [
          {
            "date": "12.10.2017",
            "headline": "RAUTHERM SPEED",
            "text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
            "download": "DOWNLOAD",
            "pdf": "(PDF, 137 KB)",
            "small": "../../images/mime/download_pdf.svg"
          },
          {
            "date": "12.10.2017",
            "headline": "RAUTHERM SPEED",
            "text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
            "download": "DOWNLOAD",
            "pdf": "(PDF, 137 KB)",
            "small": "../../images/mime/download_pdf.svg"
          },
          {
            "date": "12.10.2017",
            "headline": "RAUTHERM SPEED",
            "text": "Broschüre mit technischen Infos und Kalkulationspreisliste",
            "download": "DOWNLOAD",
            "pdf": "(PDF, 137 KB)",
            "small": "../../images/mime/download_pdf.svg"
          }
        ]
      }
    }
  ]
}
  • Content: 
    $allowed-tabs-sizes: 2, 3, 4, 6;

.accordion {
  $root: &;
  $icon-width: 4.4rem;

  margin: 0;
  padding: 0;

  &__panel {
    //stylelint-disable-next-line selector-no-qualifying-type
    > input[type='checkbox'] {
      display: none;
    }
  }

  &__label {
    @include typography-level('accordion');

    position: relative;
    display: block;
    overflow: hidden;
    color: $black;
    text-overflow: ellipsis;
    transition: background-color 0.15s;
    cursor: pointer;

    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        $gutter: rem-calc($gutter);
        padding: 1.2rem $gutter + $icon-width 1.2rem $gutter;
      }
    }

    &:hover {
      background-color: var(--accordion-label-hover-color, #{$gray-lighter});
      color: $black;

      &::before {
        background-color: $black;
        color: $white;
      }
    }

    input:checked ~ & {
      background-color: $black;
      color: $white;
    }

    &::before {
      // $symbol: map-get($icons, 'chevron-down');
      // @include icon-content-extended($symbol);
      content: '+';
      position: absolute;
      top: 0;
      right: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: $icon-width;
      height: 100%;
      padding-bottom: 0.5rem;
      font-size: 3rem;
      transition: background-color 0.15s;
    }

    input:checked ~ &::before {
      // $symbol-checked: map-get($icons, 'chevron-up');
      // @include icon-content-extended($symbol-checked);
      content: '\2013';
      background-color: $secondary;
      color: $white;
    }
  }

  &__content {
    background-color: var(--accordion-content-bg-color, #{$gray-lighter});
    color: $black;

    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        $gutter: rem-calc($gutter);
        padding: $gutter;
      }
    }

    input:not(:checked) ~ & {
      display: none;
    }
  }

  @at-root .-desktop &.-mobile {
    #{$root}__label {
      display: none;
    }

    #{$root}__content {
      background-color: inherit;
    }

    input:not(:checked) ~ #{$root}__content {
      display: block;
    }
  }

  &.-mobile {
    @include breakpoint(pre-medium) {
      #{$root}__label {
        display: none;
      }

      #{$root}__content {
        background-color: inherit;
      }

      input:not(:checked) ~ #{$root}__content {
        display: block;
      }
    }
  }

  &.tabs {
    @include breakpoint(medium) {
      #{$root}__label {
        display: none;
      }

      @for $i from 0 to 6 {
        .tab_#{$i}.tab__selector:checked ~ .accordion__panel .accordion__content.tab_#{$i} {
          display: block;
          border: 1px solid $gray-lighter;
        }

        .tab_#{$i}.tab__selector:checked ~ .tabs__tabs:not(.tabs__teasers) .tab_#{$i} {
          background-color: $black;
          color: $white;
        }

        .tab_#{$i}.tab__selector:checked ~ .tabs__tabs .tab_#{$i} {
          opacity: 1;

          .teaser__visual {
            background-color: $white;
          }
        }
      }

      .tabs__tabs {
        display: flex;
        flex-flow: row;
        margin: 0;
        padding: 0;
        list-style: none;

        li {
          flex-grow: 1;
          margin: 0 0.5rem;

          &:first-child {
            margin-left: 0;
          }

          &:last-child {
            margin-right: 0;
          }
        }

        @each $size in $allowed-tabs-sizes {
          &.tabs_#{$size} li {
            width: (100% / $size);
          }
        }

        label {
          display: block;
          width: 100%;
          height: 100%;
          padding: 1rem 0;
          border: 1px solid $gray-lighter;
          border-bottom: 0;
          text-align: center;

          .teaser__content {
            text-align: left;
          }
        }

        &.tabs__teasers {
          li {
            opacity: 0.4;
          }

          label {
            padding-top: 0;
            padding-bottom: 0;

            .teaser--simple .teaser__content {
              padding-bottom: 1rem;
              padding-left: 0.8rem;
            }
          }
        }
      }

      .accordion__panel {
        --accordion-content-bg-color: $white;
      }
    }

    .tabs__tabs {
      @include breakpoint(pre-medium down) {
        display: none;
      }
    }

    .tab__selector {
      display: none;
    }
  }
}
  • URL: /components/raw/molecules-accordion/_accordion.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/12-accordion/_accordion.scss
  • Size: 4.5 KB

There are no notes for this item.