<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 for this component. */
  • 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/01-atoms/misc/collapse-toggler/_collapse-toggler.scss
  • Size: 288 Bytes
  • Handle: @collapse-toggler
  • Preview:
  • Filesystem Path: components/01-atoms/misc/collapse-toggler/collapse-toggler.html

There are no notes for this item.