Mn-accordion NPM

MN Accordion (ES6, SCSS)

An accordion plugin with support of ES6 and SCSS

Demo & Examples

Live demo: maykinayki.github.io/mn-accordion

Installation

Using yarn

yarn add mn-accordion

Using npm

npm install mn-accordion --save

You can then import plugin and its styles in your application as follows:

import MNAccordion from 'mn-accordion';
import 'mn-accordion/dist/css/mn-accordion.css';

Using bower

bower install mn-accordion --save

HTML markup

By using bower or CDN you can also use the standalone UMD build by including path/to/bower_components/mn-accordion/dist/js/mn-accordion.min.js and path/to/bower_components/mn-accordion/dist/css/mn-accordion.min.css in your page.

<head>
    <link rel="stylesheet" href="path/to/bower_components/mn-accordion/dist/css/mn-accordion.min.css">
    ...
</head>
<body>

    <div class="mn-accordion" id="accordion">
    
            <!--Accordion item-->
            <div class="accordion-item">
                <div class="accordion-heading">
                    <h3>Section 1</h3>
                    <div class="icon">
                        <i class="arrow right"></i>
                    </div>
                </div>
                <div class="accordion-content">
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
            </div>
            <!--Accordion item-->
    
            <!--Accordion item-->
            <div class="accordion-item">
                <div class="accordion-heading">
                    <h3>Section 2</h3>
                    <div class="icon">
                        <i class="arrow right"></i>
                    </div>
                </div>
                <div class="accordion-content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
            </div>
            <!--Accordion item-->
    
            <!--Accordion item-->
            <div class="accordion-item">
                <div class="accordion-heading">
                    <h3>Section 3</h3>
                    <div class="icon">
                        <i class="arrow right"></i>
                    </div>
                </div>
                <div class="accordion-content">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
            </div>
            <!--Accordion item-->
    
        </div>
    
    <script src="path/to/bower_components/mn-accordion/dist/js/mn-accordion.min.js"></script>
    
    <script>
        (function () {
            var accordion_1 = new Accordion(document.getElementById("accordion"), {
                collapsible: false
            });
        })();
    </script>
    
</body>

Available options:

Parameter	Type	Value	Description
eventName	`Enum<String>`	click, dblclick, mouseover	Accordion item will slide down and up based on the event. Supports all HTML DOM Events
eventDelay	`Number`	0	Delay the event untill given milliseconds, usefull if eventName is mouseover
collapsible	`Boolean`	true	Enable all accordion items can be closed at once
multiple	`Boolean`	false	Enable multiple accordion item can be opened at once
defaultOpenedIndexes	`Integer \\| Array<Integer>`	0	Make accordion item default opened with given index. Pass -1 for close all items as default. Array of indexes accepted if multiple option is true
slideDuration	`Integer`	200	Slide up and down slideDuration by ms
slideDownFn	`Function`	slideDownFn(el, slideDuration) {}	Slide down function. We are using css transitions
slideUpFn	`Function`	slideUpFn(el, slideDuration) {}	Slide up function. We are using css transitions

Available methods for Accordion instance:

Method	Parameters	Return	Description
openAccordionItemByIndex	`(index: Integer)`	`Void`	Open accordion item by given index
closeAccordionItemByIndex	`(index: Integer)`	`Void`	Close accordion item by given index

License

MIT Licensed. Copyright (c) mike 2017.

accordion es6 scss

@infinitebrahmanuniverse/nolb-mn @everything-registry/sub-chunk-2183

6 years ago

6 years ago

6 years ago

6 years ago