conceal-reveal
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    conceal-reveal.js

    A tiny vanilla-js library to conceal/reveal elements.
    Demo

    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 (with a module bundler)

    $ npm i conceal-reveal
    
    import 'conceal-reveal/css/conceal-reveal.min.css'
    import { conceal, concealed, reveal, toggle } from 'conceal-reveal'

    via CDN (jsDelivr)

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/conceal-reveal@0.1.1/css/conceal-reveal.min.css">
    <script src="https://cdn.jsdelivr.net/npm/conceal-reveal@0.1.1"></script>
    <script>
      const { conceal, concealed, reveal, toggle } = ConcealReveal
    </script> 

    or for modern browsers:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/conceal-reveal@0.1.1/css/conceal-reveal.min.css">
    <script type="module">
      import { conceal, concealed, reveal, toggle } from "https://cdn.jsdelivr.net/npm/conceal-reveal@0.1.1/es/conceal-reveal.min.js"
    </script> 

    How to

    Default concealment

    <div>This content is visible by default and can be concealed.</div>
    <div class="concealed" aria-hidden="true">This content is concealed by default and can be revealed.</div>

    Customize transitions

    conceal-reveal.js uses CSS transitions.
    You can override the transition properties for whole elements or specific elements.

    /* part of conceal-reveal.css */
    .concealing {
      transition: all ease, opacity ease-in-out, border-width cubic-bezier(.501.5);
      transition-duration: .3s;
    }
     
    .revealing {
      transition: all ease, opacity ease-in-out, border-width cubic-bezier(0.5.51);
      transition-duration: .3s;
    }
    /* 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

    Install

    npm i conceal-reveal

    DownloadsWeekly Downloads

    1

    Version

    0.1.1

    License

    WTFPL

    Unpacked Size

    49 kB

    Total Files

    19

    Last publish

    Collaborators

    • luncheon