Toggle

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-toggle"><button class="c-toggle__button">The toggle title</button>
    <div class="c-toggle__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>


        /* eslint-disable react/react-in-jsx-scope */
import { h, Component } from 'preact';

const Toggle = ({ children, ...props }) => (
  <div className="c-toggle">
    <button className="c-toggle__button">
      {props.title}
    </button>

    <div className="c-toggle__content">
      {children}
    </div>
  </div>
);

export default Toggle;


        
            
            {
  "title": "The toggle title",
  "children": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}

File:

Content:


                                .c-toggle {
  @apply --typeset-ui;
  background: #fff;
  box-sizing: border-box;
  max-width: 600px;
  display: block;
  border: 2px solid map(colors, secondary, base);
  margin-top: 1em;
  margin-bottom: 1em;

  &__button {
    background-color: transparent;
    color: map(colors, primary, dark);
    padding: .5em 1em;
    cursor: pointer;
    font-weight: 600;
    border: 0;
    font-size: 1.1em;
    text-align: left;
    width: 100%;
    position: relative;
  }

  &__button::after {
    content: '';
    width: 1em;
    height: 1em;
    background-image: url('../icons/toggle.svg');
    background-size: cover;
    position: absolute;
    right: .5em;
    top: 50%;
    transform: translateY(-50%);
    transition: transform .5s ease;
  }

  &--open &__button::after {
    transform: translateY(-50%) rotate(-135deg);
  }

  &__button:focus {
    outline: none;
    box-shadow: -3px 0 map(colors, primary, base);
  }

  &__content {
    border-top: 0;
    background-color: #fff;
    overflow: hidden;
    padding: .5em 1em;
    display: none;
    line-height: 1.5;

    & > p {
      &:first-child {
        margin-top: 0;
      }

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

URL: /components/raw/toggle/Toggle.css
Filesystem Path: src/components/common/Toggle/Toggle.css
Size: 1.2 KB

Content:


                                import Velocity from 'velocity-animate';

const openClass = 'c-toggle--open';

class cToggle {
  constructor(element) {
    this.element = element;
    this.button = element.querySelector('.c-toggle__button');
    this.content = element.querySelector('.c-toggle__content');

    this.open = false;

    this.watch();
  }

  watch() {
    this.button.addEventListener('click', this.toggle.bind(this));
  }

  toggle() {
    let direction = 'slideDown';
    this.element.classList.add(openClass);
    if (this.open) {
      direction = 'slideUp';
      this.element.classList.remove(openClass);
    }
    this.open = !this.open;
    Velocity(this.content, direction, {
      duration: 500,
    });
  }
}

document.addEventListener('DOMContentLoaded', function () {
  const toggles = document.querySelectorAll('.c-toggle');
  for (let toggle of toggles) {
    new cToggle(toggle);
  }
});