Вступление #

Для переключения видимости контента можно использовать класс .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,
)

Параметры: