Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luncheon/conceal-reveal.js
A tiny vanilla-js library to conceal/reveal elements.
https://github.com/luncheon/conceal-reveal.js
animated collapse collapsible conceal hide vanilla-js
Last synced: 25 days ago
JSON representation
A tiny vanilla-js library to conceal/reveal elements.
- Host: GitHub
- URL: https://github.com/luncheon/conceal-reveal.js
- Owner: luncheon
- License: wtfpl
- Created: 2019-02-05T05:12:35.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-11T07:22:13.000Z (almost 6 years ago)
- Last Synced: 2024-05-30T16:51:15.824Z (8 months ago)
- Topics: animated, collapse, collapsible, conceal, hide, vanilla-js
- Language: TypeScript
- Homepage: https://luncheon.github.io/conceal-reveal.js/
- Size: 229 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# conceal-reveal.js
A tiny vanilla-js library to conceal/reveal elements.
[Demo](https://luncheon.github.io/conceal-reveal.js/)## API
### conceal(element: HTMLElement): void
Conceals the element.
### reveal(element: HTMLElement): void
Reveals the concealed element.
### toggle(element: HTMLElement): void
If the element is concealed, reveals the element, otherwise conceals the element.
### concealed(element: HTMLElement): boolean
Returns whether the element is concealed (including transitioning to be concealed).
## Installation
### via [npm](https://www.npmjs.com/package/conceal-reveal) (with a module bundler)
```
$ npm i conceal-reveal
``````js
import 'conceal-reveal/css/conceal-reveal.min.css'
import { conceal, concealed, reveal, toggle } from 'conceal-reveal'
```### via CDN ([jsDelivr](https://www.jsdelivr.com/package/npm/conceal-reveal))
```html
const { conceal, concealed, reveal, toggle } = ConcealReveal
```
or for [modern browsers](https://caniuse.com/#feat=es6-module):
```html
import { conceal, concealed, reveal, toggle } from "https://cdn.jsdelivr.net/npm/conceal-reveal@0.1.1/es/conceal-reveal.min.js"
```
## How to
### Default concealment
```html
This content is visible by default and can be concealed.This content is concealed by default and can be revealed.
```### Customize transitions
conceal-reveal.js uses CSS transitions.
You can override the transition properties for whole elements or specific elements.```css
/* part of conceal-reveal.css */
.concealing {
transition: all ease, opacity ease-in-out, border-width cubic-bezier(.5, 0, 1, .5);
transition-duration: .3s;
}.revealing {
transition: all ease, opacity ease-in-out, border-width cubic-bezier(0, .5, .5, 1);
transition-duration: .3s;
}
``````css
/* your css */
/* overriding transitions for whole elements */
.concealing,
.revealing {
transition-duration: .2s;
transition-timing-function: linear;
}/* overriding transitions for specific element */
#my-content.concealing {
transition-duration: 1s;
transition-timing-function: ease-out;
}
```## License
[WTFPL](http://www.wtfpl.net)