Accordion.JS

Легкий и доступный модуль accordion с расширяемым API. С помощью модуля вы можете создать accordion на своем веб-сайте, что особенно полезно для создания списков часто задаваемых вопросов.

Пошаговая установка плагина Accordion.JS к сайту

Установка с помощью npm npm install accordionjs --save Установите с помощью yarn yarn add accordionjs Ручная установка

Загрузите последнюю версию с Github и добавьте распакованные файлы в свой проект.

GitHub Репозиторий

Шаг за шагом создайте первый экземпляр аккордеона.

Убедитесь, что установлена библиотека jQuery. Если это не так, добавьте следующую строку <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script> Далее включите CSS в документ <head> <link rel="stylesheet" href="accordion.css" /> И код JS непосредственно перед закрытием тега </body> <script> src="accordion.min.js"></script> После этой строки добавьте следующий код для создания первого экземпляра

    <script>
        jQuery(document).ready(function($){
        $("#my-accordion").accordionjs(); 
        });
    </script>

В этом примере мы использовали #my-accordion в качестве идентификатора для нашего нового аккордеона(также можно использовать селекторы классов CSS). При этом мы должны добавить HTML-код

    <ul id="my-accordion" class="accordionjs">

        <!-- Section 1 -->
        <li>
            <div>Section 1 title</div>
            <div>
                    <!-- Section content here. -->
                </div>
        </li>
        
        <!-- Section 2 -->
        <li>
            <div>Section 2 title</div>
            <div>
            <!-- Section content here. -->
            </div>
        </li>
        
        <!-- Section 3 -->
        <li>
            <div>Section 3 title</div>
            <div>
            <!-- Section content here. -->
            </div>
        </li>
    
    </ul>

Плагин содержит несколько параметров, которые можно задать непосредственно при вызове плагина или с помощью атрибутов data-

<script>
    $("#my-accordion").accordionjs({
        
        closeAble   : false,

        closeOther  : true,

        slideSpeed  : 150,

        activeIndex : 1,

        openSection: function( section ){},

        beforeOpenSection: function( section ){},
    });
</script>

Автор Репозитория GitHub Репозиторий Официальный сайт

Другие библиотеки JavaScript

FullPage.js Vue 3
Carouse.js Simple
slider.js Tiny slide.js Flicking.js Splide.js Glide.js Nouislider.js Slick.js Swiper.js Animating
buttons.js Add to
calendar.js Cloud sync
button.js Vue promise btn.js Vue toast notification.js Toastr.js Notify.js Vanilla
toasts.js Notyf.js React
hot toast.js React
toastify.js Sweetalert2.js Notie.js Accordion.js