Вступление #

Чтобы показать или скрыть часть контента, можно использовать класс .js-readmore по умолчанию и специальную разметку.

Установка #

Пример разметки и инициализации показа и скрытия части контента.

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

// настройки элемента, все они описаны в разделе "Конфигурация".
const options = {
	textShow: 'Ещё',
	textHide: 'Спрятать',
	classTrigger: 'my-readmore-trigger, my-readmore-trigger-a, my-readmore-trigger-b',
}

BasicReadmore.init('.my-readmore', options)
BasicReadmore.init(document.querySelector('.my-readmore'), options)
BasicReadmore.init(document.querySelectorAll('.my-readmore'), options)

// или

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

Конфигурация #

Настройки, заданные с использованием data-атрибутов.

data-readmore-options #

В значениях указываются параметры для гибкой настройки элемента.

Методы #

show() #

Показывает часть контента.

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

hide() #

Скрывает часть контента.

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

Экземпляр #

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

const myReadmore = document.querySelector('.my-readmore')

console.log(myReadmore.BasicReadmore) // пример экземпляра

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

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

readmore:change #

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

Параметры:

const myReadmore = document.querySelector('.my-readmore')

myReadmore.addEventListener(
	'readmore:change',
	function (event) {
		console.log(event.detail) // параметры
	},
	false,
)