Вступление #

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

Установка #

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

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

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

    // или

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

Так же можно заранее инициализировать с необходимыми параметрами:

	BasicReadmore.init(document.querySelector('.my-readmore'), {
		'textShow': 'Ещё',
		'textHide': 'Спрятать',
		'classTrigger': 'my-readmore-trigger, my-readmore-trigger-a, my-readmore-trigger-b'
	});

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

Настройки, которые указываются при помощи специальных data-атрибутов

data-readmore-options #

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

Методы #

show() #

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

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

hide() #

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

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

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

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

readmore visibility #

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

Параметры:

    document.querySelector('.my-readmore').addEventListener('readmore visibility', function(event) {

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

    }, false);