CSS + HTML だけのアコーディオン(Accordion)メニュー 3タイプ

CSS + HTML だけのアコーディオン

PCでは見えないコンテンツ(タブやアコーディオン)に関してはSEO的に評価されないとされてきましたが、モバイルファーストインデック(スマホサイトをページ評価の基準)が開始されサポートされるようになるとUXの重要度も増し、今やUIに欠かせないアコーディオンメニュー!「jQuery」で実装が主流の中、jQueryを使わずに、CSS + HTML だけでレスポンシブ対応のアコーディオンを簡単に実装する方法3タイプをご紹介します。

CSS Accordion【Document】

CSS Accordion タイプ1 プレビュー

css-accordion1

CSS Accordion タイプ1 デモ

CSS Accordion タイプ1 HTML


<div class="accordion">
     <label for="one" class="accordionitem">Item one</label>
     <input type="checkbox" id="one"/>
     <p class="hiddentext">Item one アコーディオン内コンテンツ</p>
</div>
 
<div class="accordion">
     <label for="two" class="accordionitem">Item two</label>
     <input type="checkbox" id="two"/>
     <p class="hiddentext">Item two アコーディオン内コンテンツ</p>
</div>
 
<div class="accordion">
     <label for="three" class="accordionitem">Item three</label>
     <input type="checkbox" id="three"/>
     <p class="hiddentext">Item three アコーディオン内コンテンツ</p>
</div>

CSS Accordion タイプ1 CSS


.accordion label {
  display: block;
  background-color: #eeeeee;
  padding: 15px 15px;
  color: #424242;
  cursor: pointer;
  border-top: 1px solid #ffffff;
}
.accordion p {
  opacity: 0;
  display: none;
  background-color: #fff;
  padding: 15px;
}
/* change id to relate to new html */
#one:checked~.hiddentext {
  display: block;
  opacity: 1;
}
input#one {
  display: none;
  position: relative;
}
#two:checked~.hiddentext {
  display: block;
  opacity: 1;
}
input#two {
  display: none;
  position: relative;
}
#three:checked~.hiddentext {
  display: block;
  opacity: 1;
}
input#three {
  display: none;
  position: relative;
}

Pure CSS Accordion

CSS Accordion タイプ2 プレビュー

css-accordion2

CSS Accordion タイプ2 デモ

CSS Accordion タイプ2 HTML


<div class="half">
 
  <div class="tab">
    <input id="tab-one" type="checkbox" name="tabs">
    <label for="tab-one">Label One</label>
    <div class="tab-content">
      <p>https://codepen.io/franzcyril/pen/xjdVGq<br><br>Label One 内コンテンツ</p>
    </div>
  </div>
 
  <div class="tab">
    <input id="tab-two" type="checkbox" name="tabs">
    <label for="tab-two">Label Two</label>
    <div class="tab-content">
      <p>Label Two 内コンテンツ</p>
    </div>
  </div>
 
  <div class="tab">
    <input id="tab-three" type="checkbox" name="tabs">
    <label for="tab-three">Label Three</label>
    <div class="tab-content">
      <p>Label Three 内コンテンツ</p>
    </div>
  </div>
 
</div>

CSS Accordion タイプ2 CSS


.half {
  float: left;
  width: 100%;
  padding: 0 1em;
}
/* Acordeon styles */
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;/* アコーディオン タブ文字色 */
  overflow: hidden;
}
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #da3c41;/* アコーディオン タブ背景色 */
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.blue label {
  background: #2980b9;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #f2f2f2;/* タブ内背景色 */
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content p {
  margin: 1em;
  color: #000;/* タブ内文字色 */
}
/* :checked */
input:checked ~ .tab-content {
  max-height: 10em;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
input[type=checkbox] + label::after {
  content: "+";
}
input[type=radio] + label::after {
  content: "\25BC";
}
input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}

CSS + HTML only Accordion Element

CSS3 Accordion タイプ3 プレビュー

CSS Accordion タイプ3 デモ

CSS Accordion タイプ3 ライセンス

著者 Leontiev Aleksey
公式ページ website
デモページ collapsible.js
最後の更新 2016年6月14日
ライセンス MIT

CSS Accordion タイプ2 HTML


<ul>
 
  <li> <input type="checkbox" checked> <i></i>
    <h2>Accordion 1</h2>
    <p>コンテンツ 1</p>
  </li>
 
  <li> <input type="checkbox" checked> <i></i>
    <h2>Accordion 2</h2>
    <p>コンテンツ2</p>
  </li>
 
  <li> <input type="checkbox" checked> <i></i>
    <h2>Accordion 3</h2>
    <p>コンテンツ3</p>
  </li>
 
</ul>

CSS Accordion タイプ2 CSS


.transition, p, ul li i:before, ul li i:after {
  transition: all 0.25s ease-in-out;
}
.flipIn, h1, ul li {
  animation: flipdown 0.5s ease both;
}
.no-select, h2 {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

p {
  color: rgba(48, 69, 92, 0.8);
  font-size: 17px;
  line-height: 26px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  max-height: 800px;
  opacity: 1;
  transform: translate(0, 0);
  margin-top: 14px;
  z-index: 2;
}

ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #ff6873;
}
ul li:nth-of-type(1) {
  animation-delay: 0.5s;
}
ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}
ul li:nth-of-type(3) {
  animation-delay: 1s;
}
ul li:last-of-type {
  padding-bottom: 0;
}
ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #ff6873;
  width: 3px;
  height: 9px;
}
ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
ul li input[type=checkbox]:checked ~ p {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}

関連記事

  1. imagehover.css-master

    マウスオーバーで画像アニメーション表示する44種類のCSS【Image…

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

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

  3. collapsible

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

  4. tiles_grid_video

    YouTube 動画のスライドショー📽をホームページへ…

  5. vanilla-zoom-js

    Vanilla JavaScriptでズーム可能な画像ギャラリー【va…

  6. jQueryプラグイン Image Photo

    jQueryプラグイン サンプル集

制作実績一覧

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

最近の記事

  1. z会子供プログラミング講座
  2. embot
  3. カルチャースクール
  4. 外壁塗装
  5. tech-kids-school
  6. セールスライティング
  7. キーワードの選び方
  8. YouTube 集客
  9. 幼児のプログラミング教育
人気の記事 おすすめ記事
  1. フォトギャラリー
  2. 高い広告費に悩むサロン店主
  3. 広告費
  4. SEO評価を下げる低品質コンテンツ
  5. 文字装飾
  1. ブログの見出し
  2. ブログタイトル
  3. 集客ブログの作り方
  4. ブログ集客方法・パソコン操作
  5. 高い広告費に悩むサロン店主