# Toggler utility

## Description

Many times you need to hide, show, toggle some components. No need to do it manually and repeat yourself in another objects. Also no need to use jQuery hide() or show(). With Toggler class you can hide, show, toggle your node with BEM friendly way. Works both with jQuery and HTMLElement, Toggler will detect type

## Sass

No styles needed, but you need to provide one class to constructor

## Javascript

### Init constructor

You need to create object, constructor looks like this, settings are required

        new Toggler( element: JQuery|HTMLElement, settings: ITogglerSettings );

### Settings

Settings interface. You must provide only visibleClass OR hiddenClass to make this work. It's needed to detect if you element is hidden by default or not. If its hidden, pass visibleClass, otherwise hiddenClass.

You can also pass callback onShow and onHide

        interface ITogglerSettings {
            visibleClass?: string;
            hiddenClass?: string;
            onShow?: Function;
            onHide?: Function;
        }

### Initializer demo

Correctly initialized Toggler will look like this (assuming that your component is visible by default):

        let componentToggler: IToggler;
        let element: HTMLElement = document.getElementByClassName('element')[0];

        componentToggler = new Toggler( element, {
            hiddenClass: 'element--is-hidden'
        } );

### Methods

Toggler implements this interface:

        interface IToggler {
            show(): void;
            hide(): void;
            isVisible(): boolean;
            isHidden(): boolean;
            toggle(): void;
        }