1.

Download

2.

Setup

Upload clickit.js in your site, or import in your webpack project

3.

Link ClickIt.js

<script src="/path/to/js/clickit.js"></script>

4.

Markup

Example 1: aria-controls (recommend)

<button class="js-clickit my-trigger" aria-controls="my-menu">Menu</button>
. . .

<div id="my-menu" class="my-menu">
    <!-- opens and closes here -->
</div>

Example 2: anchor

<a href="#my-menu" class="js-clickit my-trigger">Menu</a>
. . .

<div id="my-menu" class="my-menu">
<!-- opens and closes here -->
</div>

5.

Make instance and Init

clickit can be any variable name you like

<script>
const clickit = new ClickIt();

window.addEventListener('DOMContentLoaded', () => {
    clickit.init();
});
</script>

... If you want to customize more, read Options and Method

Example 1: Drawer menu

<script>
const drawer = new ClickIt({
    trigger: '.drawer',
    sync: '.drawer-close-button'
});

window.addEventListener('DOMContentLoaded', () => {
    drawer.init();
});
</script>

Example 2: Accordions

<script>
const accordion = new ClickIt({
    trigger: '.accordion-header',
    height: true,
    delay: 500
});

window.addEventListener('DOMContentLoaded', () => {
    accordion.init();
});
</script>

Example 3: Modal popup

<script>
const modal = new ClickIt({
    mode: 'modal',
    openDelay: 1000,
    closeDelay: 500
});

window.addEventListener('DOMContentLoaded', () => {
    modal.init();
});
</script>

Example 4: Tabs

<script>
const tabs = new ClickIt({
    mode: 'tab'
});

window.addEventListener('DOMContentLoaded', () => {
    tabs.init();
});
</script>

Example 5: Cusom method

Global navigation on this site, automatically closes the menu when you click on a link, when you're on the home page (because it's an anchor that scroll in page).

<script>
const drawer = new ClickIt({
    trigger: '.js-drawer',
    delay: 500,
    sync: '.js-drawer-close'
});

window.addEventListener('DOMContentLoaded', () => {
    drawer.init();

    const navs = document.querySelectorAll('.drawer .echo-nav-label');
    if( navs ) {
        navs.forEach( nav => {
            nav.addEventListener( 'click', () => {
                if( (window.location.pathname === '/')||(window.location.pathname.indexOf('/index.html')) ) {
                    drawer.close();
                }
            });
        })
    }
});
</script>

6.

Decorate with CSS

Here is the minimal CSS. the rest is your choice

.my-menu.js-clickit-ready {
    /* After initialization */
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: opacity 0.5s;
}

.my-menu[aria-hidden="false"] {
    /* open */
    height: auto;
    opacity: 1;
}

.my-menu[aria-hidden="true"] {
    /* close */
}

.my-menu.js-clickit-opening {
    /* while open (require delay property) */
}

.my-menu.js-clickit-closing {
    /* while close (require delay property) */
}

.my-trigger[aria-expanded="true"] {
    /* open */
    color: white;
    background-color: blue;
}

.my-trigger[aria-expanded="false"] {
    /* close */
    color: blue;
    background-color: silver;
}