滑らかな垂直アコーディオン パネル【Accordion Panel】

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

「FAQ」「Q&A」に最適なコンテンツ切り替えアコーディオン【Accordion Panel】の設置方法をご案内します。

滑らかな垂直アコーディオンパネル【Accordion Panel】

Accordion Panelは、滑らかなスライド効果で垂直にアコーディオンを作成するJavaScript / HTML5 / CSS

  • タブ見出しのクリックイベントによってパネルが開閉します。
  • 一度に開くことができるパネルは1つだけです。
  • すべてのパネルを同時に閉じることができます。
  • IE 10以降のブラウザおよび最新のブラウザで機能します。

スマホ版プレビュー

滑らかな垂直アコーディオン パネル スマホ版

Accordion Panel デモ

著者 benbowes
公式ページ website
デモページ Accordion Panel
最後の更新 2018年6月25日
ライセンス MIT

LICENSE:MIT
MITライセンスでは、商用利用だけでなく、コピーの使用、複製、変更、統合、公開、配布、サブライセンス、複製物を販売することが認められています。ただし、使用時には著作権表示とライセンス表示をする必要があります。ソースコード上(css、html)内に、著作権およびライセンス表示をすれば、サイト上で公開し表示する義務はありません。参照:MITライセンス(日本語翻訳)

【Accordion Panel】ダウンロード

download

Accordion Panel Download

【Accordion Panel】設置方法

スタイルシート(css)『style.css』は<head”></head”>内に記述! JavaScriptは『myApp.js』<body></body>内に記述します。


<link rel="stylesheet" href="style.css">
<script src="myApp.js"></script>

【Accordion Panel】のHTML

<section class="accordion" role="tablist" aria-multiselectable="false">
 
    <a class="accordion-panel__heading" href="javascript:;">アコーディオンパネル 1</a>
    <div class="accordion-panel__content">
        <h4>見出し1</h4>
        <p>コンテンツ1</p>
    </div>
 
    <a class="accordion-panel__heading" href="javascript:;">アコーディオンパネル 2</a>
    <div class="accordion-panel__content">
        <h4>見出し2</h4>
        <p>コンテンツ2</p>
    </div>
 
    <a class="accordion-panel__heading" href="javascript:;">アコーディオンパネル 3</a>
    <div class="accordion-panel__content">
        <h4>見出し3</h4>
        <p>コンテンツ3</p>
    </div>
 
</section>

【Accordion Panel】のcss

.accordion {
  border-radius: 3px;
  overflow: hidden;
  border: 3px solid #6495ED;
  max-width: 100%;/* -- アコーディオン横幅の指定 -- */
}
.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;/* -- アコーディオン コンテンツ内 Max縦幅の指定 -- */
  padding: 0 20px 20px 20px;
  background: #fff;
}

【Accordion Panel】のソースコード設置例


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <title>【Accordion Panel】</title>
 
    <link rel="stylesheet" href="style.css">
 
</head>
<body>
<div class="container">
<h1>滑らかな垂直アコーディオン パネル【Accordion Panel】</h1>
 
<section class="accordion" role="tablist" aria-multiselectable="false">
 
    <a class="accordion-panel__heading" href="javascript:;">アコーディオンパネル 1</a>
    <div class="accordion-panel__content">
        <h4>見出し1</h4>
        <p>コンテンツ1</p>
    </div>
 
    <a class="accordion-panel__heading" href="javascript:;">アコーディオンパネル 2</a>
    <div class="accordion-panel__content">
        <h4>見出し2</h4>
        <p>コンテンツ2</p>
    </div>
 
    <a class="accordion-panel__heading" href="javascript:;">アコーディオンパネル 3</a>
    <div class="accordion-panel__content">
        <h4>見出し3</h4>
        <p>コンテンツ3</p>
    </div>
 
</section>
 
	<script src="myApp.js"></script>
 
</div>
</body>
</html>

Accordion Panel Download

関連記事

  1. collapsible

    JavaScriptでスムーズなコンテンツ切り替えプラグイン デモ【c…

  2. grid-gallery-master

    Lightboxと軽量フォト グリッドギャラリー 【Grid Gall…

  3. handy-collapse

    アコーディオンメニュー内にアコーディオン【handy-collapse…

  4. accordion_jsjavascript & CSS 超シンプル スライディング アコーディオン

    javascript & CSS 超シンプル スライディング…

  5. jQueryプラグイン Image Photo

    jQueryプラグイン サンプル集

  6. tilescolumns-unite-gallery

    スマホ時にスワイプにも対応👆グリッドギャラリー【Til…

制作実績一覧

  1. bacchus
  2. ふじぜんリニューアル後
  3. legend-planning
  4. ポスティングこころざし様
  5. インテリアコーディネーター小島真子

最近の記事

  1. tech-kids-school
  2. セールスライティング
  3. キーワードの選び方
  4. YouTube 集客
  5. 幼児のプログラミング教育
  6. E-A-T(専門性・権威性・信頼性)
  7. ホームページ集客
  8. instagram
  9. ameba-seo
  10. 開業
人気の記事 おすすめ記事
  1. フォトギャラリー
  2. 高い広告費に悩むサロン店主
  3. 広告費
  4. SEO評価を下げる低品質コンテンツ
  5. 文字装飾
  1. ブログの見出し
  2. ブログタイトル
  3. 集客ブログの作り方
  4. ブログ集客方法・パソコン操作
  5. 高い広告費に悩むサロン店主