Вступление #

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

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

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

toggleVisible visibility #

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

    document.querySelector('.my-toggle-visible').addEventListener('toggleVisible visibility', function() {

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

    }, false);

Параметры: