maekoya / simpleslidetoggle

It is slide like jquery 'slideToggle', 'slideUp', 'slideDown'.

SimpleSlideToggle

It is slide like jquery slideToggle, slideUp, slideDown.

Installation

Install via npm:

npm install simple-slide-toggle

and include in project:

import { slideUp, slideDown, slideToggle } from 'simple-slide-toggle'

Usage

simple use

const $target = document.getElementById('slide-target')

slideToggle($target, 500)

with HTML

Supports dynamically changing WAI-ARIA attributes aria-hidden, aria-expanded. You need to write that attribute in HTML.

<button
  id="slide-trigger">Slide Trigger</button>
<div
  id="slide-target"
  aria-hidden="true"
  aria-expanded="false">
  Slide content
</div>

const $trigger = document.getElementById('slide-trigger')
const $target = document.getElementById('slide-target')

$trigger.addEventListener('click', () => {
  slideToggle($target, 500)
})

Parameters

slideToggle(target, duration)

• target :HTMLElement
  A Slide target element.
• duration: :number (default: 400)
  A number determining how long the animation will run.