toggler

Done

HTML
View
Context
Assets
Info
Notes


        
        <div class="toggler ">
    <div class="toggler__trigger">
        <p class="heading heading--7"><strong>Specific feature name</strong></p>
        <div class="toggler__icon"><span class="icon-plus">
                <span class="icon-plus__inner"></span>
            </span>
        </div>
    </div>
    <div class="toggler__target">
        <div class="toggler__visual">
            <div class="toggler__visual__inner">
                <picture class="visual">
                    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
                    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
                    <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
                </picture>

            </div>
        </div>
        <div class="toggler__content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo totam quo asperiores sit suscipit iusto quia, ipsam quibusdam id pariatur?</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo totam quo asperiores sit suscipit iusto quia, ipsam quibusdam id pariatur?</p>
            <p>
            <section class="overlay-content">
                <a href="#" target="_blank" class="overlay-content__trigger link link--underlined">
                    <span class="link__label">Discover more</span>
                </a>

                <div class="overlay-content__overlay">
                    <div class="overlay-content__header">
                        <div class="overlay-content__header__inner">
                            <span class="overlay-content__heading">Advanced CPU and rock-solid stability</span>

                            <a class="overlay-content__close">
                                <span class="icon-cross">
                                    <span class="icon-cross__inner"></span>
                                </span>
                            </a>
                        </div>
                    </div>

                    <div class="overlay-content__inner">
                        <section class="col-two">
                            <div class="col-two__inner">
                                <div class="col-two__item">
                                    <div class="col-two__visual">
                                        <div class="video-player">
                                            <picture class="visual">
                                                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
                                                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
                                                <img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
                                            </picture>

                                            <span class="video-player__trigger">
                                                <span class="video-ID">agkb5TSjEmc</span>

                                                <span class="icon-play">
                                                    <span class="icon-play__inner"></span>
                                                    <span class="icon-play__icon">
                                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                            <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                                        </svg>
                                                    </span>
                                                </span>
                                            </span>
                                        </div>

                                    </div>
                                </div>

                                <div class="col-two__item">
                                    <div class="col-two__content">
                                        <h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>

                                        <div class="col-two__item__description">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </section>

                        <div class="spacer spacer--4"></div>

                        <section class="col-two col-two--reversed">
                            <div class="col-two__inner">
                                <div class="col-two__item">
                                    <div class="col-two__visual">
                                        <div class="video-player">
                                            <picture class="visual">
                                                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
                                                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
                                                <img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
                                            </picture>

                                            <span class="video-player__trigger">
                                                <span class="video-ID">agkb5TSjEmc</span>

                                                <span class="icon-play">
                                                    <span class="icon-play__inner"></span>
                                                    <span class="icon-play__icon">
                                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                            <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                                        </svg>
                                                    </span>
                                                </span>
                                            </span>
                                        </div>

                                    </div>
                                </div>

                                <div class="col-two__item">
                                    <div class="col-two__content">
                                        <h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>

                                        <div class="col-two__item__description">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </section>

                        <div class="spacer spacer--4"></div>

                        <section class="col-two">
                            <div class="col-two__inner">
                                <div class="col-two__item">
                                    <div class="col-two__visual">
                                        <div class="video-player">
                                            <picture class="visual">
                                                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
                                                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
                                                <img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
                                            </picture>

                                            <span class="video-player__trigger">
                                                <span class="video-ID">agkb5TSjEmc</span>

                                                <span class="icon-play">
                                                    <span class="icon-play__inner"></span>
                                                    <span class="icon-play__icon">
                                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                            <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                                        </svg>
                                                    </span>
                                                </span>
                                            </span>
                                        </div>

                                    </div>
                                </div>

                                <div class="col-two__item">
                                    <div class="col-two__content">
                                        <h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>

                                        <div class="col-two__item__description">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </section>

                        <div class="spacer spacer--4"></div>

                        <section class="col-two col-two--reversed">
                            <div class="col-two__inner">
                                <div class="col-two__item">
                                    <div class="col-two__visual">
                                        <div class="video-player">
                                            <picture class="visual">
                                                <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-player-mobile.jpg">
                                                <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-player.jpg">
                                                <img data-sizes="auto" data-src="/graphics/video-player-mobile.jpg" class="lazyload" alt="">
                                            </picture>

                                            <span class="video-player__trigger">
                                                <span class="video-ID">agkb5TSjEmc</span>

                                                <span class="icon-play">
                                                    <span class="icon-play__inner"></span>
                                                    <span class="icon-play__icon">
                                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 7.6 14">
                                                            <path fill="currentColor" d="M7.4,6.3l-5.6-6c-0.4-0.4-1-0.4-1.4,0C0.1,0.5,0,0.7,0,1v12c0,0.6,0.4,1,1,1c0.3,0,0.5-0.1,0.7-0.3l5.6-6C7.7,7.3,7.7,6.7,7.4,6.3z" />
                                                        </svg>
                                                    </span>
                                                </span>
                                            </span>
                                        </div>

                                    </div>
                                </div>

                                <div class="col-two__item">
                                    <div class="col-two__content">
                                        <h2 class="col-two__heading heading heading--5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h2>

                                        <div class="col-two__item__description">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </section>

                    </div>
                </div>
            </section>
            </p>
        </div>
    </div>
</div>


        <div class="toggler {{ modifier }}">
  <div class="toggler__trigger">
    <p class="heading heading--7"><strong>Specific feature name</strong></p>
    <div class="toggler__icon">{{> @icon-plus }}</div>
  </div>
  <div class="toggler__target">
    <div class="toggler__visual">
      <div class="toggler__visual__inner">
        {{render '@visual' visual merge=true }}
      </div>
    </div>
    <div class="toggler__content">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo totam quo asperiores sit suscipit iusto quia, ipsam quibusdam id pariatur?</p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo totam quo asperiores sit suscipit iusto quia, ipsam quibusdam id pariatur?</p>
      <p>{{render '@overlay-content' }}</p>
    </div>
  </div>
</div>


        
            
            modifier: ''
visual:
  src:
    mobile: /graphics/video-poster-mobile.jpg
    desktop: /graphics/video-poster.jpg
  alt: ''

File:

Content:


                                const TOGGLER = (function(window, undefined) {
  const settings = {
    debug: false,
  };

  const selectors = {
    container: '.togglers',
    wrapper: '.toggler',
    trigger: '.toggler__trigger',
    target: '.toggler__target',
    bgvideo: VIDEOBG.selectors.theWrap,
  };

  const classes = {
    active: 'active',
    accordion: 'togglers--accordion',
  };

  const togglerEvents = {
    open: 'toggler-opened',
    closed: 'toggler-closed',
  };

  let resizeTimer = 0;

  let theWidth = 0;

  const triggerEvent = (element, name, data = {}) => {
    const event = new CustomEvent(name, data);
    element.dispatchEvent(event);
  }

  const openIt = $toggler => {
    if (settings.debug) { console.log('TOGGLER - OPEN', $toggler); }

    $toggler.classList.add(classes.active);

    const $target = $toggler.querySelector(selectors.target);
    $target.style.height = 'auto';

    const height = $target.clientHeight;

    $target.style.height = '0px';

    if ($toggler.querySelector(selectors.bgvideo)) {
      const theWrap = $toggler.querySelector(selectors.bgvideo);
      const theVideo = theWrap.querySelector('video');
      VIDEOBG.playIt(theVideo);
    }

    // delay to enable the transition
    setTimeout(() => {
      $target.style.height = `${height}px`;

      $target.addEventListener('transitionend', () => triggerEvent($toggler, togglerEvents.open), { once: true });
    }, 0);
  };

  const closeIt = $toggler => {
    if (settings.debug) { console.log('TOGGLER - CLOSE', $toggler); }

    const $target = $toggler.querySelector(selectors.target);
    $target.style.height = '0px';

    $toggler.classList.remove(classes.active);

    if ($toggler.querySelector(selectors.bgvideo)) {
      const theWrap = $toggler.querySelector(selectors.bgvideo);
      const theVideo = theWrap.querySelector('video');
      VIDEOBG.pauseIt(theVideo);
    }

    $target.addEventListener('transitionend', () => triggerEvent($toggler, togglerEvents.closed), { once: true });
  };

  const closeAll = $container => {
    if (settings.debug) { console.log('TOGGLER - CLOSE ALL', $container); }

    const $openTogglers = $container.querySelectorAll(`${selectors.wrapper}.${classes.active}`);
    [...$openTogglers].forEach(closeIt);
  };

  const toggle = $toggler => {
    if (settings.debug) { console.log('TOGGLER - TOGGLE', $toggler); }

    if ($toggler.classList.contains(classes.active)) {
      closeIt($toggler);
    } else {
      openIt($toggler);
    }
  }

  const onTriggerClicked = e => {
    if (settings.debug) { console.log('TOGGLER - TRIGGER CLICKED', e); }

    const $trigger = e.currentTarget;

    if (!$trigger) { return; }

    const $toggler = $trigger.closest(selectors.wrapper);

    if (!$toggler) { return; }

    const $container = $toggler.closest(selectors.container);

    if (settings.debug) { console.log('TOGGLER - TRIGGER CLICKED DEBUG', $trigger, $toggler, $container); }

    if ($container && $container.classList.contains(classes.accordion)) {
      closeAll($container);
    }

    toggle($toggler);
  };

  const prepareToggler = $toggler => {
    if (settings.debug) { console.log('TOGGLER - PREPARE', $toggler); }

    const prepare = ($toggler) => {
      const $trigger = $toggler.querySelector(selectors.trigger);
      $trigger.addEventListener('click', onTriggerClicked);

      if ($toggler.classList.contains(classes.active)) {
        openIt($toggler);
      } else {
        closeIt($toggler);
      }
    }

    prepare($toggler);
  };

  const onResize = () => {
    if (theWidth === window.innerWidth) { return; }

    theWidth = window.innerWidth;

    clearTimeout(resizeTimer);

    resizeTimer = setTimeout(() => {
      const $activeTogglers = document.querySelectorAll(`${selectors.wrapper}.${classes.active}`);
      [...$activeTogglers].forEach(openIt);
    }, 100);
  };

  const init = () => {
    if (settings.debug) { console.log('TOGGLER - INIT'); }

    const $togglers = document.querySelectorAll(selectors.wrapper);
    [...$togglers].forEach(prepareToggler);
  };

  document.addEventListener('DOMContentLoaded', init);
  window.addEventListener('resize', onResize);
}(window));

URL: /components/raw/toggler/toggler.js
Filesystem Path: ../src/03_molecules/toggler/toggler.js
Size: 4.2 KB

Content:


                                .toggler {
  color: var(--color--neutrals-9);

  &__trigger {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: var(--gap--2) 0;
  }

  &__icon {
    height: 16px;
    margin-left: var(--gap--4);
    margin-top: var(--gap--1);
    transition: transform 300ms;
    width: 16px;
  }

  &__target {
    overflow: hidden;
    transition: height 300ms;
  }

  &__visual {
    margin: var(--gap--2) 0 var(--gap--4);

    &__inner {
      height: 0;
      padding-top: 73.58%;
      position: relative;
      width: 100%;
    }
  }

  &.active {
    .toggler__icon {
      transform: rotate(45deg);
    }

    .toggler__content {
      padding: var(--gap--4) 0;

      p {
        margin-top: var(--gap--4);

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

URL: /components/raw/toggler/toggler.scss
Filesystem Path: ../src/03_molecules/toggler/toggler.scss
Size: 875 Bytes

Handle: @toggler
Preview:
- With layout
- Component only
Filesystem Path: ../src/03_molecules/toggler/toggler.hbs
References (3): @icon-plus, @visual, @overlay-content
Referenced by (2): @usp-interactive, @usp-interactive--reversed

No notes defined.