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
No styles needed, but you need to provide one class to constructor
You need to create object, constructor looks like this, settings are required
new Toggler( element: JQuery|HTMLElement, settings: ITogglerSettings );
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;
}
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'
} );
Toggler implements this interface:
interface IToggler {
show(): void;
hide(): void;
isVisible(): boolean;
isHidden(): boolean;
toggle(): void;
}