Вступление #

Для переключения видимости контента можно использовать класс .js-toggle-visible по умолчанию и специальную разметку.

Установка #

Пример разметки и инициализации.

    <div class="js-toggle-visible">
        <button
			class="toggle-visible-trigger"
			type="button"
		>
			Toggle trigger
		</button>

		<div class="toggle-visible-content">
            <p>Разнообразный и богатый опыт постоянное информационно-пропагандистское обеспечение нашей деятельности в значительной степени обуславливает создание новых предложений. С другой стороны новая модель организационной деятельности влечет за собой процесс внедрения и модернизации направлений прогрессивного развития.</p>
            <p>Равным образом рамки и место обучения кадров способствует подготовки и реализации систем массового участия. Повседневная практика показывает, что укрепление и развитие структуры требуют определения и уточнения новых предложений. С другой стороны консультация с широким активом требуют определения и уточнения систем массового участия. Товарищи! консультация с широким активом представляет собой интересный эксперимент проверки соответствующий условий активизации. С другой стороны реализация намеченных плановых заданий влечет за собой процесс внедрения и модернизации системы обучения кадров, соответствует насущным потребностям</p>
        </div>
    </div>

    BasicToggleVisibleContent.init('.my-toggle-visible');
    BasicToggleVisibleContent.init(document.querySelector('.my-toggle-visible'));
    BasicToggleVisibleContent.init(document.querySelectorAll('.my-toggle-visible'));

    // или

    BasicToggleVisibleContent.init(); // по умолчанию инициaлизирует элементы с классом .js-toggle-visible

Методы #

show() #

Показывает контент.

    // принимает значение типа Object или String
    BasicToggleVisibleContent.show('.my-toggle-visible')

hide() #

Скрывает контент.

    // принимает значение типа Object или String
    BasicToggleVisibleContent.hide('.my-toggle-visible')

Экземпляр #

У каждого инициализированного элемента есть свой экземпляр.

	const myToggleVisible = document.querySelector(".my-toggle-visible");

	console.log(myToggleVisible.BasicToggleVisibleContent); // пример экземпляра

Прослушивание событий #

Можно прослушать события элемента и получить нужные параметры.

toggleVisible:change #

Срабатывает при переключении видимости контента.

	const myToggleVisible = document.querySelector('.my-toggle-visible');

	myToggleVisible.addEventListener('toggleVisible:change', function() {

        console.log(event.detail); // параметры

    }, false);

Параметры: