滑らかな垂直アコーディオンパネル デモ

アコーディオンパネル 1

Smooth Vertical Accordion Panels with Pure JS and CSS3

CSS3transitionsで滑らかなスライド効果で垂直アコーディオンを作成するためのJavaScript / HTML5 / CSS。

アコーディオンパネル 2

HTML

<section class="accordion">

<article class="accordion-panel">
<a class="accordion-panel__heading" href="javascript:;">Accordion Panel One</a>
<div class="accordion-panel__content">
<h4>Title One</h4>
<p>Description One</p>
</div>
</article>

<article class="accordion-panel">
<a class="accordion-panel__heading" href="javascript:;">Accordion Panel Two</a>
<div class="accordion-panel__content">
<h4>Title Two</h4>
<p>Description Two</p>
</div>
</article>

<article class="accordion-panel">
<a class="accordion-panel__heading" href="javascript:;">Accordion Panel Three</a>
<div class="accordion-panel__content">
<h4>Title Three</h4>
<p>Description Three</p>
</div>
</article>

...

</section>

アコーディオンパネル 3

CSS

.accordion {
border-radius: 3px;
overflow: hidden;
border: 3px solid #6495ED;
}

.accordion-panel {
border: 0px #6495ED solid;
transition: all .6s .2s ease;
}

.accordion-panel.active {
transition: all .2s .6s;
border-left: 15px #6495ED solid;
}

.accordion-panel__heading {
padding: 20px;
display: block;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
color: #6495ED;
background: #f5f5f5;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
font-weight: 600;
border-bottom: 1px solid #6495ED;
transition: all .6s;
cursor: pointer;
}

.accordion-panel__heading:HOVER {
color: #333;
background: #f1f1f1;
transition: all .2s;
}

.active .accordion-panel__heading:HOVER,
.active .accordion-panel__heading {
color: #333;
background: #fff;
border-bottom: 0;
}

.accordion-panel__content {
padding: 0 20px 0 20px;
background: #f1f1f1;
max-height: 0;
overflow: hidden;
transition: all .6s;
}

.active .accordion-panel__content {
max-height: 500px;
padding: 0 20px 20px 20px;
background: #fff;
}

アコーディオンパネル 4

JavaScript

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

設置方法

アコーディオンサンプル

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