jQuery

【jQuery】jQueryアコーディオンプラグインjQoordion

July 3, 2017
jQoordion

jQoordionはjQueryアコーディオンプラグイン。

HTML

JS

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="jquery.jqoordion.js"></script>
    <script>
        jQuery( function($) {
            var accordion = $('ul.accordion').jQoordion({
                allowMultiple       : true,
                initialShowIndex    : 0,
                initialState        : 'hidden',
            });
            $('#expand-all').on( 'click', function(e) {
                e.preventDefault();
                accordion.jQoordion( 'expandAll' );
            });
            $('#collapse-all').on( 'click', function(e) {
                e.preventDefault();
                accordion.jQoordion( 'collapseAll' );
            });
        });
    </script>
    <ul class="accordion">
        <li>
            <h2 class="title">Accordion 1 Title</h2>
            <div class="content">
                <p>Accordion 1 Content Here</p>
            </div>
        </li>
        <li>
            <h2 class="title">Accordion 2 Title</h2>
            <div class="content">
                <p>Accordion 2 Content Here</p>
            </div>
        </li>
     </ul>

MIT