Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Elementbaukasten Zielgruppen

Verwendung

Zum schnellen Wechsel zwischen mehreren Themenblöcken, Zielgruppen oder Kanälen.

Vorschau

HTML

                
                  <div class="targetgroups" id="1">
  <div class="targetgroups_wrapper">
    <div class="targetgroups_inner">
      <div class="tabs_wrapper hidden-print">
        <ul class="tabs">
          <li class="architects tab" data-content="group1">
            <span>Architekten</span>
          </li>
          <li class="structural_engineers tab" data-content="group2">
            <span>Tragwerkplaner</span>
          </li>
          <li class="construction_physicists tab" data-content="group3">
            <span>Bauphysiker</span>
          </li>
          <li class="processors tab" data-content="group4">
            <span>Verarbeiter</span>
          </li>
          <li class="dealer tab" data-content="group5">
            <span>Händler</span>
          </li>
        </ul>
      </div>
      <div class="tab_contents_wrapper">
        <div class="tab_contents_wrapper_inner container">
          <div class="contents">
            <div data-group="group1" class="tab_content">
              Architekten
            </div>
            <div data-group="group2" class="tab_content">
              Tragwerkplaner
            </div>
            <div data-group="group3" class="tab_content">
              Bauphysiker
            </div>
            <div data-group="group4" class="tab_content">
              Verarbeiter
            </div>
            <div data-group="group5" class="tab_content">
              Händler
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

              @charset "UTF-8";
.panel {
  margin-bottom: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.grid_header {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}
@media screen and (max-width: 767px) {
  .grid_header {
    margin-top: 25px;
    margin-bottom: 25px;
  }
}

.grid.grid-accordion + .grid-accordion .accordion_wrapper {
  border-top: none;
}

.accordion_wrapper {
  border-bottom: 1px solid #e6e6e6;
  overflow: hidden;
}
.accordion_wrapper:first-child {
  border-top: 1px solid #E6E6E6;
}
.accordion_wrapper .accordion_heading {
  background-color: #fff;
  transform: translate3d(0px, 0px, 0px);
}
.accordion_wrapper .accordion-toggle {
  display: block;
  padding: 40px 0 40px 35px;
  position: relative;
  /* alignment anchor for the indicator */
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-image {
  text-align: center;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-image img {
  max-width: 100%;
  height: auto;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-image svg.av_svg_icon {
  width: 100%;
  max-width: 52px;
  height: auto;
  max-height: 52px;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-image svg.av_svg_icon * {
  fill: #0069b4;
  transition: 0.2s fill ease;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-image svg.av_svg_icon *[stroke] {
  stroke: #0069b4;
  transition: 0.2s stroke ease;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-image.svg_image img {
  max-height: 80px;
  width: auto;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header {
  padding-right: 120px;
  position: static;
  /* alignment anchor for the indicator must be .accordion-toggle to get absolute positioning working in ie as the cols use display:table-cell which is kinda buggish in ie regarding absolute positioning */
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .header {
  transition: 0.2s color ease;
  font-size: 23px;
  font-size: 1.4375rem;
  line-height: 25px;
  line-height: 1.5625rem;
  margin-bottom: 0;
}
@media screen and (max-width: 767) {
  .accordion_wrapper .accordion-toggle .header_wrapper .col-header .header {
    transition: none;
  }
}
@media screen and (max-width: 767px) {
  .accordion_wrapper .accordion-toggle .header_wrapper .col-header .header {
    word-wrap: break-word;
    font-size: 17px;
    font-size: 1.0625rem;
    line-height: 19px;
    line-height: 1.1875rem;
  }
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .teaser {
  margin-top: 15px;
  color: #4c4c4c;
  font-size: 16px;
  font-size: 1rem;
  line-height: 22px;
  line-height: 1.375rem;
  font-family: 'Corpid_TT5_Regular', Arial;
  font-weight: normal;
  font-style: normal;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .teaser .cms_content p {
  margin: 11px 0 22px;
  margin: 0.6875rem 0 1.375rem;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .teaser .cms_content ul,
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .teaser .cms_content ol {
  margin: 11px 0 22px;
  margin: 0.6875rem 0 1.375rem;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .indicator {
  display: block;
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 15px;
  width: 50px;
  height: 29px;
  transition: 0.4s transform ease;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .indicator:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .indicator:before {
  font-size: 26px;
  line-height: 26px;
  color: #b3b3b3;
  display: block;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .labelled_indicator {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 15px;
  text-align: center;
  padding-bottom: 20px;
  width: 100px;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .labelled_indicator .arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 39px;
  height: 20px;
  bottom: 0;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .labelled_indicator .arrow:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .labelled_indicator .arrow:before {
  font-size: 20px;
  line-height: 20px;
  color: #b3b3b3;
  transition: 0.4s transform ease;
  display: block;
}
.accordion_wrapper .accordion-toggle .header_wrapper .col-header .labelled_indicator .text {
  display: block;
  color: #b3b3b3;
  margin-bottom: 10px;
}
.accordion_wrapper .accordion-toggle:not(.collapsed) .header_wrapper .col-header .indicator {
  transform: translateY(-50%) rotate(180deg);
}
.accordion_wrapper .accordion-toggle:not(.collapsed) .header_wrapper .col-header .labelled_indicator .arrow:before {
  transform: rotate(180deg);
}
.accordion_wrapper .accordion-toggle:hover .col-image svg.av_svg_icon * {
  fill: #f9b200;
}
.accordion_wrapper .accordion-toggle:hover .col-image svg.av_svg_icon *[stroke] {
  stroke: #f9b200;
}
.accordion_wrapper .accordion-toggle:hover .col-header .header {
  color: #f9b200;
}
.accordion_wrapper .accordion-body .accordion_content_inner {
  padding: 0 105px 35px 35px;
}
.accordion_wrapper .accordion-body .accordion_content_inner .ce_header {
  text-align: left;
  margin-bottom: 10px;
}
.accordion_wrapper .accordion-body .accordion_content_inner .contentelement:last-child {
  margin-bottom: 0;
}
.accordion_wrapper .accordion-body.has-image .accordion_content_inner {
  padding-left: 30px;
}
@media screen and (max-width: 767px) {
  .accordion_wrapper .accordion-body.has-image .accordion_content_inner {
    padding-left: 0;
  }
}
@media print {
  .accordion_wrapper .accordion-body {
    height: auto !important;
    display: block;
    visibility: visible;
  }
}
@media screen and (max-width: 991px) {
  .accordion_wrapper .accordion-toggle {
    padding: 15px 0 15px 0;
  }
  .accordion_wrapper .accordion-toggle .header_wrapper .col-header {
    padding-right: 80px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .accordion_wrapper .accordion-toggle .header_wrapper .col-header .indicator {
    height: 13px;
    width: 24px;
  }
  .accordion_wrapper .accordion-toggle .header_wrapper .col-header .indicator:before {
    font-size: 13px;
    line-height: 13px;
  }
  .accordion_wrapper .accordion-toggle.with_labelled_indicator {
    padding: 15px;
  }
  .accordion_wrapper .accordion-toggle.with_labelled_indicator .header_wrapper .col_header {
    padding-right: 120px;
  }
  .accordion_wrapper .accordion-body .accordion_content_inner {
    padding-right: 44px;
    padding-bottom: 25px;
  }
}
@media screen and (max-width: 767px) {
  .accordion_wrapper .accordion-body .accordion_content_inner {
    padding-left: 0;
    padding-right: 0;
  }
}

.row-tabled-mobile {
  display: table;
  width: calc(100% + 30px);
  table-layout: fixed;
}
.row-tabled-mobile:before, .row-tabled-mobile:after {
  content: none;
}

.col-tabled-mobile {
  display: table-cell;
  float: none;
  vertical-align: middle;
  height: 100%;
}

.targetgroups {
  overflow: hidden;
  /* mobile accordions styling */
}
.targetgroups .tabs_wrapper {
  height: 145px;
  background: #fff;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
  z-index: 100;
}
.targetgroups .tabs_wrapper ul.tabs {
  font-size: 0;
  text-align: center;
  display: inline-block;
  height: 100%;
  width: 100%;
}
.targetgroups .tabs_wrapper ul.tabs li.tab {
  display: inline-block;
  font-size: 17px;
  font-size: 1.0625rem;
  line-height: 145px;
  font-family: 'CorpidCd_TT7', Arial;
  font-weight: normal;
  font-style: normal;
  transition: 0.2s color ease, 0.8s border-color ease, 0.8s box-shadow ease, 0.8s top ease;
  color: #0069b4;
  cursor: pointer;
  height: 100%;
  width: 254px;
  max-width: 20%;
  border: 1px solid transparent;
  border-left-color: #e6e6e6;
  position: relative;
  top: 0;
  background-color: #fff;
}
.targetgroups .tabs_wrapper ul.tabs li.tab:last-child {
  border-right-color: #e6e6e6;
}
.targetgroups .tabs_wrapper ul.tabs li.tab span {
  position: relative;
  top: 25px;
  padding-top: 50px;
}
.targetgroups .tabs_wrapper ul.tabs li.tab span:before {
  color: #b3b3b3;
  transition: 0.2s color ease;
  font-size: 42px;
  line-height: 42px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
@media screen and (max-width: 767) {
  .targetgroups .tabs_wrapper ul.tabs li.tab span:before {
    transition: none;
  }
}
.targetgroups .tabs_wrapper ul.tabs li.tab:hover, .targetgroups .tabs_wrapper ul.tabs li.tab:focus {
  color: #f9b200;
}
.targetgroups .tabs_wrapper ul.tabs li.tab:hover span:before, .targetgroups .tabs_wrapper ul.tabs li.tab:focus span:before {
  color: #f9b200;
}
.targetgroups .tabs_wrapper ul.tabs li.tab:after {
  content: '';
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  background-color: #fff;
  transform: translateX(-50%) rotate(45deg) skew(-10deg, -10deg);
  left: 50%;
  bottom: -12px;
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  opacity: 0;
  transition: 0.8s opacity ease;
}
.targetgroups .tabs_wrapper ul.tabs li.tab.active {
  border-right-color: #e6e6e6;
  border-bottom-color: #e6e6e6;
  top: 10px;
  box-shadow: 0 25px 25px -25px rgba(0, 0, 0, 0.1);
}
.targetgroups .tabs_wrapper ul.tabs li.tab.active + li.tab {
  border-left-color: transparent;
}
.targetgroups .tabs_wrapper ul.tabs li.tab.active:after {
  opacity: 1;
}
.targetgroups .tabs_wrapper ul.tabs li.tab.architects span:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.targetgroups .tabs_wrapper ul.tabs li.tab.construction_physicists span:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.targetgroups .tabs_wrapper ul.tabs li.tab.dealer span:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.targetgroups .tabs_wrapper ul.tabs li.tab.colleges span:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.targetgroups .tabs_wrapper ul.tabs li.tab.investors span:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.targetgroups .tabs_wrapper ul.tabs li.tab.steel_constructors span:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.targetgroups .tabs_wrapper ul.tabs li.tab.structural_engineers span:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.targetgroups .tabs_wrapper ul.tabs li.tab.processors span:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.targetgroups .tab_contents_wrapper {
  position: relative;
  z-index: 99;
  padding-top: 145px;
  padding-bottom: 87px;
}
@media screen and (max-width: 991px) {
  .targetgroups .tab_contents_wrapper {
    padding-bottom: 87px;
  }
}
@media screen and (max-width: 767px) {
  .targetgroups .tab_contents_wrapper {
    padding-bottom: 60px;
  }
}
@media print {
  .targetgroups .tab_contents_wrapper {
    background: none;
    padding-bottom: 20px;
    padding-top: 0 !important;
  }
}
.targetgroups .accordions_wrapper {
  padding-bottom: 87px;
}
@media screen and (max-width: 991px) {
  .targetgroups .accordions_wrapper {
    padding-bottom: 87px;
  }
}
@media screen and (max-width: 767px) {
  .targetgroups .accordions_wrapper {
    padding-bottom: 60px;
  }
}
.targetgroups .accordion_wrapper .accordion-body {
  border-top: 1px solid #e6e6e6;
  background-color: #f7fafc;
}
.targetgroups .accordion_wrapper .accordion-body .accordion_content_inner {
  padding: 20px 15px;
  margin-top: 25px;
  margin-bottom: 25px;
  background-color: #fff;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.targetgroups .accordion_wrapper .accordion-body .accordion_content_inner .tab_content.with_link_overlay {
  padding-bottom: 63px;
}
@media screen and (max-width: 767px) {
  .targetgroups .accordion_wrapper .accordion-body .accordion_content_inner .tab_content .targetgroups-owl.owl-loaded {
    margin-top: -15px;
  }
}
.targetgroups .accordion_wrapper .accordion-body .accordion_content_inner .tab_content .targetgroups-owl:not(.single_item_without_owl):not(.owl-loaded) {
  position: relative;
  background-color: rgba(0, 0, 0, 0.3);
}
.targetgroups .accordion_wrapper .accordion-body .accordion_content_inner .tab_content .targetgroups-owl:not(.single_item_without_owl):not(.owl-loaded):after {
  width: 44px;
  height: 44px;
  content: '';
  display: block;
  background: rgba(0, 0, 0, 0.8) url("../images/3rdparty/fancybox/fancybox_loading.gif") center center no-repeat;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.targetgroups .accordion_wrapper .accordion-body .accordion_content_inner .tab_content .targetgroups-owl:not(.single_item_without_owl):not(.owl-loaded) .slide_wrapper:not(:first-child) {
  display: none;
}

SCSS

              @import "../general/_general";

// reset bootstrap panel styling (as we neither need nor want it here)
.panel {
  margin-bottom:0;
  background-color:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}

@import "../accordion/code";

.targetgroups {
  overflow:hidden;

  .tabs_wrapper {
    height:145px;
    background:#fff;
    @include box-shadow(0 0 25px rgba(0, 0, 0, .1));
    text-align:center;
    position:relative;
    z-index:100;

    ul.tabs {
      font-size:0;
      text-align:center;
      display:inline-block;
      height:100%;
      width:100%;

      li.tab {
        display:inline-block;
        @include rem-font-size(17);
        line-height:145px;
        @include corpid-cd-bold;
        @include transition($linkcolor-transition-duration color ease, 0.8s border-color ease, 0.8s box-shadow ease, 0.8s top ease);
        color:$blue;
        cursor:pointer;
        height:100%;
        width:254px;
        max-width:20%;
        border:1px solid transparent;
        border-left-color:$lightgrey;
        position:relative;
        top:0;
        background-color:#fff;

        &:last-child {
          border-right-color:$lightgrey;
        }

        span {
          position:relative;
          top:25px;
          padding-top:50px;

          &:before {
            color:$grey;
            @include linkcolor-transition;
            font-size:42px;
            line-height:42px;
            @include autocenterX;
            top:0;
          }
        }

        &:hover,
        &:focus {
          color:$orange;

          span {
            &:before {
              color:$orange;
            }
          }
        }

        &:after {
          content:'';
          position:absolute;
          display:block;
          width:24px;
          height:24px;
          background-color:#fff;
          @include transform(translateX(-50%) rotate(45deg) skew(-10deg, -10deg));
          left:50%;
          bottom:-12px;
          border-bottom:1px solid $lightgrey;
          border-right:1px solid $lightgrey;
          opacity:0;
          @include transition(0.8s opacity ease);
        }

        &.active {
          border-right-color:$lightgrey;
          border-bottom-color:$lightgrey;
          top:10px;
          @include box-shadow(0 25px 25px -25px rgba(0, 0, 0, .1));

          & + li.tab {
            border-left-color:transparent;
          }

          &:after {
            opacity:1;
          }
        }

        &.architects {
          span {
            @include schoeck-icon($icon-targetgroups-architects);
          }
        }
        &.construction_physicists {
          span {
            @include schoeck-icon($icon-targetgroups-construction-physicists);
          }
        }
        &.dealer {
          span {
            @include schoeck-icon($icon-targetgroups-dealer);
          }
        }
        &.colleges {
          span {
            @include schoeck-icon($icon-targetgroups-colleges);
          }
        }
        &.investors {
          span {
            @include schoeck-icon($icon-targetgroups-investors);
          }
        }
        &.steel_constructors {
          span {
            @include schoeck-icon($icon-targetgroups-steel-constructors);
          }
        }
        &.structural_engineers {
          span {
            @include schoeck-icon($icon-targetgroups-structural-engineers);
          }
        }
        &.processors {
          span {
            @include schoeck-icon($icon-targetgroups-processors);
          }
        }
      }
    }
  }

  .tab_contents_wrapper {
    position:relative;
    z-index:99;
    padding-top:145px;

    padding-bottom:$ce-spacing-lg;

    @media screen and (max-width:$screen-sm-max) {
      padding-bottom:$ce-spacing-sm;
    }
    @media screen and (max-width:$screen-xs-max) {
      padding-bottom:$ce-spacing-xs;
    }
    @media print {
      background:none;
      padding-bottom:$ce-spacing-print;
      padding-top:0 !important;
    }
  }

  .accordions_wrapper {
    padding-bottom:$ce-spacing-lg;

    @media screen and (max-width:$screen-sm-max) {
      padding-bottom:$ce-spacing-sm;
    }
    @media screen and (max-width:$screen-xs-max) {
      padding-bottom:$ce-spacing-xs;
    }
  }

  /* mobile accordions styling */
  .accordion_wrapper {
    .accordion-body {
      border-top:1px solid $lightgrey;
      background-color:#f7fafc;

      .accordion_content_inner {
        padding:20px 15px;
        margin-top:25px;
        margin-bottom:25px;
        background-color:#fff;
        @include box-shadow(1px 2px 6px rgba(0, 0, 0, .1));
        @include border-radius(3px);

        .tab_content {
          &.with_link_overlay {
            padding-bottom:63px;
          }

          .targetgroups-owl {
            &.owl-loaded {
              @media screen and (max-width:$screen-xs-max) {
                margin-top:-15px;
              }
            }

            &:not(.single_item_without_owl):not(.owl-loaded) {
              position:relative;
              background-color:rgba(#000, 0.3);

              &:after {
                width:44px;
                height:44px;
                content:'';
                display:block;
                background:rgba(#000, 0.8) url('../images/3rdparty/fancybox/fancybox_loading.gif') center center no-repeat;
                @include border-radius(5px);
                @include autocenterXY();
              }

              .slide_wrapper {
                &:not(:first-child) {
                  display:none;
                }
              }
            }
          }
        }
      }
    }
  }
}

JavaScript

                var $screen_xs_min=0,
  $screen_sm_min=768,
  $screen_md_min=992,
  $screen_lg_min=1200,
  $screen_xl_min=1400,
  $screen_xs_max=($screen_sm_min-1),
  $screen_sm_max=($screen_md_min-1),
  $screen_md_max=($screen_lg_min-1),
  $screen_lg_max=($screen_xl_min-1);

jQuery(document).ready(function() {
  // common tabs
  var activateTabs=function($wrapper, $preJsMarkup) {
    var $myMarkup=$preJsMarkup.clone();

    $wrapper.html($myMarkup);

    var $tabs=$myMarkup.find('ul.tabs').find('li.tab'),
      $tabContents=$myMarkup.find('.tab_contents_wrapper').find('.tab_content');

    $tabs.on('click', function(e, preventScrolling) {
      var $currentTab=jQuery(this),
        $currentContent=$tabContents.filter('[data-group="'+$currentTab.attr('data-content')+'"]'),
        $activeTab=$tabs.filter('.active'),
        $activeContent=$tabContents.filter('[data-group="'+$activeTab.attr('data-content')+'"]');

      if(!preventScrolling)
        jQuery('html, body').animate({scrollTop: $currentTab.offset().top-60}, 500, 'easeInOutQuint');

      if($currentTab.hasClass('active'))
        return;

      $tabs.removeClass('active');
      $currentTab.addClass('active');
      $tabContents.hide();
      $currentContent.show();
    });

    $tabs.first().trigger('click', [true]);
  };

  // mobile accordions
  var activateAccordions=function($wrapper, $preJsMarkup) {
    var $myMarkup=$preJsMarkup.clone(),
      wrapperId='accordion-group-'+$wrapper.parents('.targetgroups').attr('id'),
      $accordionsWrapper=jQuery('<div class="accordions_wrapper" id="'+wrapperId+'"></div>'),
      $tabs=$myMarkup.find('ul.tabs').find('li.tab'),
      $tabContents=$myMarkup.find('.tab_contents_wrapper').find('.tab_content');

    $tabs.each(function() {
      var $currentTab=jQuery(this),
        currentTabIdentifier=$currentTab.attr('data-content'),
        $currentContent=$tabContents.filter('[data-group="'+currentTabIdentifier+'"]');

      var accordionTitle=$currentTab.find('span').html(),
        accordionId=wrapperId+'-accordion-'+currentTabIdentifier;

      var $accordion=jQuery(
        '<div class="accordion_wrapper panel accordion-autoscroll" data-group="'+currentTabIdentifier+'">'+ // we need the "panel"-Class to make bootstrap close the other accordions inside the parent.
          '<div class="container-fluid accordion_heading">'+
            '<a class="accordion-toggle collapsed clearfix" data-toggle="collapse" data-parent="#'+wrapperId+'" href="#accordion-'+accordionId+'" aria-expanded="true" aria-controls="accordion-'+accordionId+'">'+
              '<div class="header_wrapper row">'+
                '<div class="col-xs-12 col-header">'+
                  '<h2 class="header">'+accordionTitle+'</h2>'+
                  '<span class="indicator"></span>'+
                '</div>'+
              '</div>'+
            '</a>'+
          '</div>'+
          '<div id="accordion-'+accordionId+'" class="container-fluid accordion-body collapse">'+
            '<div class="accordion_content_inner">'+
            '</div>'+
          '</div>'+
        '</div>');

      $accordion.find('.accordion_content_inner').append($currentContent);
      $accordionsWrapper.append($accordion);
    });

    $wrapper.html($accordionsWrapper);

    // init autoscroll
    jQuery('body').on('shown.bs.collapse', '.accordion-autoscroll .accordion-body', function()
    {
      if(jQuery(this).hasClass('prevent_scroll'))
      {
        jQuery(this).removeClass('prevent_scroll');
        return;
      }

      jQuery('html, body').animate({scrollTop:jQuery(this).parents('.accordion-autoscroll').offset().top-50}, 500, 'easeInOutQuint');
    });
  };

  // actual calls
  jQuery('.targetgroups .targetgroups_inner').each(function() {
    var $element=jQuery(this),
      $preJsMarkup=$element.clone();

    $element.wrap('<div class="targetgroups_wrapper"></div>');
    var $wrapper=$element.parent('.targetgroups_wrapper');

    // triggers
    enquire.register("screen and (max-width: "+$screen_sm_max+"px)", {
      match: function() {
        activateAccordions($wrapper, $preJsMarkup);
        jQuery(window).trigger('resize.px.parallax');
      }
    }).register("screen and (min-width: "+$screen_md_min+"px)", {
      match: function() {
        activateTabs($wrapper, $preJsMarkup);
        jQuery(window).trigger('resize.px.parallax');
      }
    });
  });
});

Abhängigkeiten

EnquireJS

www.wicky.nillia.ms/enquire.js