見出しをクリックするとコンテンツが開くUI

スマホの時は見出しをクリックするとコンテンツ(説明文などの内容)が開く、PCで見た時は、最初から開いたままにしておきたい場合の、開閉するUIを作成しました。

クリックで開く

クリックしたら開閉するコンテンツ

FAQや説明分など、複数の見出しをつけて解説しているページは、縦に長くなってしまい読みづらいですよね。

知りたい情報が、たまたま一番下の方にあったとして、そこまでスクールしなければ読めないとなると、ちょっともどかしい気がします。

そんなとき、見出しだけ並べて目次のようにして、クリックしたら内容が見えるようにすると見やすいかなと思い、早速調べて作ってみました。

見出しをクリックするとコンテンツが開くという動きは、jQueryを使うことで実装できます。

クリックしたら開閉する動きの作成手順

jQueryのプログラム本体を読み込む

HTMLサイトで使用する場合

jQueryを読み込んでいないサイトには、次の公式サイトにある<script>タグのソースコードをコピペして、footerの後ろ~bodyタグ前に貼っておきます。

https://code.jquery.com/

jquery

HTMLを編集する

次に、開いたときの状態を作成します。


<div>
<h3 class="faq-title">質問などの目次</h3>
<p class="hidden">
※応えや説明文のテキスト
</p>
</div>

CSSを編集


.hidden {
display: none;
}

@media screen and (min-width: 768px) {
.hidden {
display: block;
 }
}

スマホやタブレットで閲覧した際には「※応えや説明文のテキスト」の部分が閉じた状態で表示され、それより横幅のあるパソコンでみたときは、最初から開いた状態で表示されます。

その他、サイトに合わせて、見やすいスタイルを設定します。

プログラムを書く

クリックしたら開くように指示するためのプログラムを、さきほど、jQueryのプログラム本体(公式サイトからコピペしてきたもの)を貼り付けた箇所の下に記述します。


<script>
    $(document).ready(function(){
      $(' .faq-title').on('click', function(){
        $(this).next().toggleClass('hidden');
      });
    });
</script>

WordPressサイトでjQueryを使うとき

WordPressでは、HTMLサイトの時のようにjQueryのプログラム本体(公式サイトからコピペしてきたもの)を直接貼るのではなく、wp_enqueue_script()関数を使って読み込む必要があります。

<head>内のwp_head()関数の前に、記述をするのが簡単ですが、functions.php に記述することもできます。

次のように記述すると、インストール時にWordPressに同梱されているjQueryを読み込んでくれます。

<head>内のwp_head()関数の前に記述する場合

wp_enqueue_script( ‘jquery’ );

functions.phpに記述する場合

function theme_name_scripts() {
wp_enqueue_script( array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

「$」を「jQuery」にすることを忘れずに!

WordPressでは、他のスクリプトとコンフリクト(競合)を起こしてしまう可能性があるので、「$」のところを「jQuery」と記述します。


<script>
    jQuery(document).ready(function(){
      jQuery(' .faq-title').on('click', function(){
        jQuery(this).next().toggleClass('hidden');
      });
    });
</script>