Вступление #

Чтобы показать или скрыть часть контента, можно использовать класс .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);