超シンプルアコーディオン- Accordion.js

「accordion.css」「accordion.min.js」

<link rel="stylesheet" href="css/accordion.css">
<script src="js/accordion.min.js"></script>

「HTML」

<div class="accordion-container">
<div class="ac">
<h2 class="ac-q" tabindex="0">アコーディオン1</h2>
<div class="ac-a">
<p>コンテンツ1</p>
</div>
</div>

<div class="ac">
<h2 class="ac-q" tabindex="0">アコーディオン2</h2>
<div class="ac-a">
<p>コンテンツ2</p>
</div>
</div>

<div class="ac">
<h2 class="ac-q" tabindex="0">アコーディオン3</h2>
<div class="ac-a">
<p>コンテンツ3</p>
</div>
</div>
</div>

アコーディオンを初期化

<script>
new Accordion('.accordion-container');
</script>

オプションとデフォルト

var accordion = new Accordion({
duration: 600, // animation duration in ms {number}
itemNumber: 0, // item number which will be shown {number}
aria: true, // add ARIA elements to the HTML structure {boolean}
closeOthers: true, // show only one element at the same time {boolean}
showItem: false, // always show element that has itemNumber number {boolean}
elementClass: 'ac', // element class {string}
questionClass: 'ac-q', // question class {string}
answerClass: 'ac-a', // answer class {string}
targetClass: 'ac-target' // target class {string}
});

項目を切り替えるときに関数を起動

var accordion = new Accordion({
onToggle: function onToggle() {}
});

設置方法

アコーディオンサンプル

フォトギャラリーサンプル