Vanilla JavaScript Accordion

Demo

Toyota Motor Corporation is a Japanese automotive manufacturer headquartered in Toyota, Aichi, Japan. Toyota was the world's first automobile manufacturer to produce more than 10 million vehicles per year which it has done since 2012, when it also reported the production of its 200-millionth vehicle.

Honda Motor Co. is a Japanese public multinational conglomerate corporation primarily known as a manufacturer of automobiles, aircraft, motorcycles, and power equipment. Honda has been the world's largest motorcycle manufacturer since 1959, as well as the world's largest manufacturer of internal combustion engines measured by volume, producing more than 14 million internal combustion engines each year.

Nissan Motor Company Ltd is a Japanese multinational automobile manufacturer headquartered in Nishi-ku, Yokohama. Since 1999, Nissan has been part of the Renault–Nissan Alliance, a partnership between Nissan and French automaker Renault. Nissan is the world's largest electric vehicle (EV) manufacturer, with global sales of more than 275,000 all-electric vehicles as of mid-December 2016

Installation

Include the script

<script src="path/to/vanilla-js-accordion.min.js"></script>

Include the CSS (feel free to edit it or write your own)

<link rel="stylesheet" href="path/to/vanilla-js-accordion.css">

Write your the HTML

<div class="js-Accordion" id="accordion">
    <button>Title 1</button>
    <div>
        Shabby chic ennui cred godard, forage roof party scenester health goth typewriter pitchfork. Stumptown whatever fap, austin heirloom asymmetrical lo-fi ethical seitan. Post-ironic hella listicle brunch meggings artisan. YOLO tattooed blue bottle, fanny pack gluten-free put a bird on it migas forage trust fund.
    </div>

    <button>Title 2</button>
    <div>
        Shabby chic ennui cred godard, forage roof party scenester health goth typewriter pitchfork. Stumptown whatever fap, austin heirloom asymmetrical lo-fi ethical seitan. Post-ironic hella listicle brunch meggings artisan. YOLO tattooed blue bottle, fanny pack gluten-free put a bird on it migas forage trust fund.
    </div>

    <button>Title 3</button>
    <div>
        Shabby chic ennui cred godard, forage roof party scenester health goth typewriter pitchfork. Stumptown whatever fap, austin heirloom asymmetrical lo-fi ethical seitan. Post-ironic hella listicle brunch meggings artisan. YOLO tattooed blue bottle, fanny pack gluten-free put a bird on it migas forage trust fund.
    </div>
</div>

Initialize the accordion

var accordion = new Accordion({
    element: "accordion",    // ID of the accordion container
    openTab: 2,              // [optional] Accordion tab to start opened with. All tabs closed if not set.
    oneOpen: true            // [optional] Allow one accordion tab only to be opened at a time
});

Option	Type	Default	Description
element	string		id of the accordion container
oneOpen	boolean	false	Only one tab can be open
openTab	int		Start the accordion with this tab open

Method	Arguments	Description
.open(n)	n: int	Opens an accordion tab by index
.close(n)	n: int	Closes an accordion tab by index
.destroy()		Removes the event listener from accordion

Vanilla JavaScript Accordion

Accessible JavaScript accordion - tiny and simple.

Demo

Download

Installation

Options

Methods

Licence