よくある質問ページに使えそうなjQueryのアコーディオンUI

2020年8月16日2022年2月23日 7分

アコーディオンは、通販サイトでよく見かけるFAQのページで、質問の数や項目が多い場合このUIを活用して、ユーザーが探している情報を多くスクロールすることなく、整理することができます。

今回は、よくある質問ページに使えそうなjQueryのアコーディオンUIについてご紹介します。

アコーディオンとは？
アコーディオンのサンプル
コード一式
ネイティブなJavaScriptでのアコーディオン

アコーディオンとは？

アコーディオンは、情報量をユーザーが表示・非表示のコントロールができることで、欲しい情報を過度にスクロールすることなく効率的に辿り着くことができます。

その為、スマートフォンサイトのようにある程度の情報量にしなければいけない時などで、アコーディオンを用いれば、ユーザーが欲しい情報だけさらに詳しく見せることができ、便利なUIです。

2020年5月25日アコーディオンの基本的な使い方とデザイン

アコーディオンのサンプル

アコーディオンは、HTMLとCSS、jQueryをそれぞれ記述して実装します。

サンプルは、6つの項目で作っていますが、HTMLの <div class=”accordion-item”>　〜 </div> のブロックを、追加や削除をして記載したい個数にできます。

Question.1

Answer.1

Question.2

Answer.2

Question.3

Answer.3

Question.4

Answer.4

Question.5

Answer.5

Question.6

Answer.6

コード一式

jQueryは既に<head>〜</head>の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。

MEMO

当サイトでは以下のjQueryを使用しています。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>

上記のような記述が、htmlファイルの

<head></head>

の中に無い場合その中へ貼り付けましょう。

コードを表示する

HTML

<div class="container_accordion">
  <div class="accordion">
    <div class="accordion-item">
      <button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">Question.1</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Answer.1</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">Question.2</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Answer.2</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">Question.3</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Answer.3</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-5" aria-expanded="false"><span class="accordion-title">Question.4</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Answer.4</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-4" aria-expanded="false"><span class="accordion-title">Question.5</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Answer.5</p>
      </div>
    </div>
    <div class="accordion-item">
      <button id="accordion-button-4" aria-expanded="false"><span class="accordion-title">Question.6</span><span class="icon" aria-hidden="true"></span></button>
      <div class="accordion-content">
        <p>Answer.6</p>
      </div>
    </div>
  </div>
</div>

CSS

/* アコーディオン */
.container_accordion {
  margin: 40px auto 60px;
  width: 100%;
}

.container_accordion h3 {
  font-size: 1.5em;
  font-weight: 500;
  display: inline-block;
  padding: 0 0.4em 0.4em;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
.container_accordion h3 {
	padding: 0 0 0.4em;
	text-align: left;
	display: block;
}
}
	
.accordion .accordion-item {
  border-bottom: 1px solid lightgray;
}
.accordion .accordion-item button[aria-expanded=true] {
  border-bottom: 1px solid #D80C18;
}
.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: #313131;
  font-size: 1em;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}
.accordion button:hover, .accordion button:focus {
  cursor: pointer;
  color: #D80C18;
}
.accordion button:hover::after, .accordion button:focus::after {
  cursor: pointer;
  color: #D80C18;
  border: 1px solid #D80C18;
}
.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}
.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}
.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}
.accordion button[aria-expanded=true] {
  color: #D80C18;
}
.accordion button[aria-expanded=true] .icon::after {
  width: 0;
}
.accordion button[aria-expanded=true] + .accordion-content {
  opacity: 1;
  max-height: 21em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
}

const items = document.querySelectorAll(".accordion button");

function toggleAccordion() {
  const itemToggle = this.getAttribute('aria-expanded');
  
  for (i = 0; i < items.length; i++) {
    items[i].setAttribute('aria-expanded', 'false');
  }
  
  if (itemToggle == 'false') {
    this.setAttribute('aria-expanded', 'true');
  }
}

items.forEach(item => item.addEventListener('click', toggleAccordion));

$(function(){
    $(window).scroll(function (){
        $('.fadein').each(function(){
            var targetElement = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > targetElement - windowHeight + 200){
                $(this).css('opacity','1');
                $(this).css('transform','translateY(0)');
            }
        });
    });
});