ボタンクリックで項目を折りたためる
- 縦に長くなる目次を表示・非表示と切り替えられるようにしたい。
- スマホで見やすいように、縦長になった塊を折りたためるアコーディオンにしたい。
- JavaScriptの記述をまずやってみたい。
ココがポイント
結論：
- CSSで表示もしくは非表示にする新しいクラスを作成しておく
- jQueryの「on click」イベントで目的の場所がクリックされたら、処理が行われる関数を定義
- 関数の中に先ほどつくったクラスを追加する処理を書く
- 関数の中にクリックされる回数で表示されるテキストを切り替える処理も書く
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、Webページを作成していると、箇条書きが縦長になり、全体的に見にくくなっているそのように感じたことはございませんか？
私も、目次を追加しましたが、画面で見てみると、縦に長い目次になり、それだけでサイドバーを埋め尽くしている状態になっていました。
そこで、jQueryを利用していろいろ試行錯誤した中で収納できるメニューをWordPressでも実装することができたので、今回ご紹介させていただきます。
この構文はjQuery初心者でもわかりやすいものとなっておりますので、jQueryを書く最初の一歩としてこの記事を活用していただければと思います。
目次
1.画面のスクロールに合わせて移動する目次を作成
2.WordPressでjQueryを追加できるプラグイン
自作のjQueryを追加することができるようになるプラグインをインストールする方法:
3.ボタンをクリックすると非表示から表示に切り替わるJavaScript
jQueryを追加する
「ある特定のブロックをクリックすると、その下にある要素をたたんだり、開いたりできる」
これから紹介するJavaScriptは、このアクションができるものになります。
まず最初に、「Webページを開いたら非表示の状態→クリックすると表示する」というコードをご紹介。
次に「Webページを開いたら表示の状態→クリックすると非表示になる」というコードをご紹介します。
3.Step1 idとclassの値を確認
下のリンクを参考にして、
①「ボタンとなるブロックのid」②「ボタンのテキストのclass」③「ボタンの下にあるリストのclass」を確認してください。
参考
ココに注意
HTMLのソースコードでclassやidの中に半角スペースが場合、CSSセレクタの書き方：
HTMLコードで「半角スペース」でそれぞれの値が区切られている。
これはそれぞれのidやclassがくっついていることを表しています。
CSSに記述するセレクタには、最初のclassだけを指定すればOK。
CSSのセレクタにclassをくっつけて指定するときは「半角スペース」で区切らず、「.（ドット）」でつなげます。
3.Step2 CSSを追加
/* toggleClass用 */
#id_1 .class_2{
cursor: pointer;
}
#id_1 .class_3 {
display: none;
}
#id_1 .class_3.open {
display: block;
}
上のCSSコードをコピーして、新しいCSSを追加。
2行目5行目8行目のセレクタを「3.Step1 idとclassの値を確認」で確認した値に。
| id_1 | ①「ボタンとなるブロックのid」 |
| class_2 | ②「ボタンのテキストのclass」 |
| class_3 | ③「ボタンの下にあるリストのclass」 |
3行目：cursor: pointer;
ボタンにマウスポインタを置いたときに変化するアイコンを設定できる
6行目：display: none;
ブロックを非表示にする。
8行目：#id_1 .class_3.open { ←ここがポイント
セレクタの末尾（.open）に新しいクラスが追加されると｛｝で囲んだスタイルが適用される
9行目：display: block;
ブロックを表示する命令「.open」が追加されるとブロックを表示することができます。
3.Step3 JavaScriptを追加
jQuery(document).ready(function( $ ){
/* カウンターリセット */
var c = 0;
$('#id_1 .class_2').on('click', function(){
/* 目次表示非表示切り替え */
$(this).next().toggleClass('open');
/* テキスト切り替え */
c = c + 1;
if(c % 2 == 1){
$(this).text('－ この記事の目次');
} else {
$(this).text('＋ この記事の目次');
};
});
});
「2.WordPressでjQueryを追加できるプラグイン」でインストールした「Custom CSS & JS」から新規のJavaScriptを作成して上のコードをコピペ。
4行目の「id_1」＝「①「ボタンとなるブロックのid」」、「class_2」＝「②「ボタンのテキストのclass」」に置き換えるだけ
参考
JavaScriptのそれぞれのコードの意味
1行目：jQuery(document).ready(function( $ ){
ドキュメント（WebページのHTML）を読み込み終わったら、「function」以下の命令を実行する。
これはjQueryを動かすコードなので触らない。
3行目：var c = 0;
Webページのウィンドウを開いたときにjQueryで囲まれた関数が実行されます。
その最初の行で変数cに0を代入してカウンターとして利用できるようにします。
4行目：$('#id_1 .class_2').on('click', function(){
Web上の<id="id_1">内の<class="class_2">で指定してあるブロックをクリックしたときに次の関数を実行。
6行目：$(this).next().toggleClass('open');
クリックしたブロックから見て次のブロックに当たるタブにclass="open"を追加する。
7-13行目：c = c + 1; if(c % 2 == 1){ $(this).text('－ この記事の目次'); } else { $(this).text('＋ この記事の目次'); };
クリックするたびに、クリックしたブロックが「text」の丸括弧（）内のテキストに切り替わる。
以上で、目次を非表示の状態からクリックすると表示されるJavaScriptが適用できました。
4.ボタンをクリックすると表示から非表示に切り替わるJavaScript
「3.Step2 CSSを追加」の6行目と9行目の値を逆（none ←入替→ block）にすればOKです。
classの名前（open）や表示されるテキストを、お好みでかえてください。
5.Webフォントをタイトルに追加する方法
追加情報になります。前述の方法では、装飾文字であるWebフォントを追加できなかったため、以下のコードに全て置き換えました。
JavaScriptを全て以下に変更。
jQuery(document).ready(function( $ ){
$('#id_1 .class_2').addClass('add');
$('#id_1 .class_2').on('click', function(){
$(this).next().toggleClass('open');
$(this).toggleClass('add');
$(this).toggleClass('change');
});
});
CSSを全て以下に変更。
.add::before{
font-family: 'FontAwesome';
content: 'Unicode';
}
.change::before{
font-family: 'FontAwesome';
content: 'Unicode';
}
#id_1 .class_2{
cursor: pointer;
}
#id_1 .class_3 {
display: none;
}
#id_1 .class_3.open {
display: block;
- 「id_1」、「class_2」、「class_3」は「3.Step1 idとclassの値を確認」から該当する値に変更。
- 「content: 'Unicode';」の「Unicode」部分に、「FontAwesome」からお好みのアイコンのコードをいれる。
もっと詳しく
「FontAwesome」は以下から該当するものを参照：
6.どの要素にもWebフォントを追加できる方法
空の要素を追加することで、擬似要素を適用できない要素にもWebフォントを追加できるようにしています。
もっと詳しく
まとめ
お疲れ様でした。
今回は、WordPressで自動生成される目次の表示・非表示を、ボタンクリックで切り替えるJavaScriptについてご紹介しました。
ここを入口にjQueryを使って、WordPressのテーマを自分でカスタマイズできるようになれればWebページのデザインが楽しくなりそうですね。
最後まで、ご一読いただきありがとうございました。
