Collapse Toggler 

<div>
    <multi-toggler class="collapse-toggler" data-target-next data-toggle-class="sr-only" data-toggle-self-class="collapsed" data-toggle-on-init>
        <span class="collapse-toggler__flop">mehr anzeigen</span>
        <span class="collapse-toggler__flip">weniger anzeigen</span>
    </multi-toggler>
    <p>Ipsum ex nisi cillum voluptate qui sunt voluptate nostrud consequat adipisicing in occaecat sit qui. Irure excepteur tempor eu consectetur proident laborum commodo ullamco deserunt excepteur culpa. Excepteur dolore ad veniam et in culpa dolore irure aliqua. Ea fugiat minim cillum exercitation. Culpa ex nulla id consequat pariatur quis non veniam qui consequat ipsum cillum. Sint eiusmod nulla veniam mollit sunt cillum ea adipisicing adipisicing laborum quis ea aliqua. Et sit mollit aliqua irure minim do deserunt proident consectetur consequat.</p>
</div>
 
<div>
    <multi-toggler class="collapse-toggler" data-target-next data-toggle-class="sr-only" data-toggle-self-class="collapsed" data-toggle-on-init>
        <span class="collapse-toggler__flop">mehr anzeigen</span>
        <span class="collapse-toggler__flip">weniger anzeigen</span>
    </multi-toggler>
    <p>Ipsum ex nisi cillum voluptate qui sunt voluptate nostrud consequat adipisicing in occaecat sit qui. Irure excepteur tempor eu consectetur proident laborum commodo ullamco deserunt excepteur culpa. Excepteur dolore ad veniam et in culpa dolore irure aliqua. Ea fugiat minim cillum exercitation. Culpa ex nulla id consequat pariatur quis non veniam qui consequat ipsum cillum. Sint eiusmod nulla veniam mollit sunt cillum ea adipisicing adipisicing laborum quis ea aliqua. Et sit mollit aliqua irure minim do deserunt proident consectetur consequat.</p>
</div>
 
/* No context defined. */
  • Content: 
    .collapse-toggler {
  @extend %heading-font-heavy;
  @extend %link-unstyled;

  cursor: pointer;

  .collapse-toggler__flop {
    display: none;
  }

  &.collapsed {
    .collapse-toggler__flip {
      display: none;
    }

    .collapse-toggler__flop {
      display: inline;
    }
  }
}
  • URL: /components/raw/collapse-toggler/_collapse-toggler.scss
  • Filesystem Path: components/05-atoms/togglers/collapse-toggler/_collapse-toggler.scss
  • Size: 289 Bytes
  • Handle: @collapse-toggler
  • Preview:
  • Filesystem Path: components/05-atoms/togglers/collapse-toggler/collapse-toggler.html

No notes defined.