jQueryを使ってクリックで開閉するコンテンツを実装する方法

「よくあるご質問」などのページでよく見かける、クリックで開閉するコンテンツを実装する方法をご紹介いたします。

簡単なデモページを作成したので、挙動については以下よりご確認ください。質問部分をクリックすると、回答が開きます。

デモページを見る

以前、「クリックやタップで開いたり閉じたりするFAQを実装する方法」という記事を書いたのですが、今回はもっとシンプルな方法をご紹介したいと思います。

jQueryを使ってクリックで開閉するコンテンツを実装する方法

ステップ1. HTMLのマークアップ

HTMLは、以下のようにdl/dt/ddを使って構築します。

<dl class="faq">
  <dt>質問質問質問<sapn class="faq-plus">+</sapn></dt>
  <dd>回答回答回答回答</dd>
</dl>

dl要素に”faq”というクラスを追加しておきます。

※今回はdl/dt/ddを使っていますが、別に他の要素でも構いません。他の要素で実装する場合は、後述するCSSやスクリプトで指定している要素を置き換えてください。

ステップ2. CSSの調整

続いて、CSSで見た目を調整していきます。以下はあくまで例なので、CSSはサイトに合わせて実装してください。

.faq {
  margin: 0 0 20px;
}

.faq dt {
  font-size: 18px;
  font-weight: bold;
  background: #fff;
  padding: 25px 75px 25px 42px;
  margin: 0;
  cursor: pointer;
  position: relative;
}

.faq dd {
  font-size: 15px;
  padding: 15px 25px 15px 42px;
  margin: 0;
  line-height: 1.6;
  display: none;
}

.faq-plus {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  background: #e73363;
  color: #fff;
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50%;
  text-align: center;
}

回答部分はクリックした時に開きたいので、dd要素は予め「display:none;」で非表示にしています。

ステップ3. スクリプトの実行

最後にjQueryをロードして、スクリプトを実行します。記述する場所は、</body>の直前でOKです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('.faq dt').click(function(){
  $(this).next('.faq dd').stop(true, true).slideToggle();
  $(this).toggleClass('faq-open');
  });
});
</script>

「.faq dt」がクリックされたら、次の要素である「.faq dd」を開きます。加えて、dt要素に「faq-open」というクラスを付与するようにしています。

faq-openクラスは、dd要素が開いている状態の時に、dt要素の装飾を変える場合に備えて追加しているので、必要ない場合は「$(this).toggleClass(‘faq-open’);」は削除してください。

あとがき

非常にシンプルなコードで開閉するコンテンツが実装可能ですね。

ちなみにdd要素はdisplay:none;で非表示にしていましたが、jQuery側で「$(‘.faq dd’).hide();」のようにしてもOKです。