JavaScriptでスムーズなコンテンツ切り替えプラグイン デモ【collapsible.js】

<script src="collapsible.js"></script>

<div class="block" data-collapsible>
<div class="block__title"><h3>パネル 1</h3></div>
<div class="block__content">
<p>コンテンツ 1</p>
</div>
</div>

<div class="block" data-collapsible>
<div class="block__title"><h3>パネル 2</h3></div>
<div class="block__content">
<p>コンテンツ 2</p>
</div>
</div>

<iv class="block" data-collapsible>
<div class="block__title"><h3>パネル 3</h3></div>
<div class="block__content">
<p>コンテンツ 3</p>
</div>
</div>

node：操作されるHTML要素
eventNode： eventListenerがアタッチされるHTML要素。

new Collapsible({
node: document.querySelectorAll('.block'),
eventNode: '.block__title'
});

new Collapsible({
node: document.querySelectorAll('.block'),
eventNode: '.block__title',
isCollapsed: false
});

new Collapsible({
node: document.querySelectorAll('.block'),
eventNode: '.block__title',
observe: true
});

new Collapsible({
node: document.querySelectorAll('.block'),
eventNode: '.block__title',
expandCallback: function(){},
collapseCallback function(){},
observeCallback function(){}
});