折りたたみが最も簡単 details と summary をjQueryに置き換えるメモ

最も簡単な折りたたみはDetailsとsummaryですが、同じくらい簡単なjQueryによるDetailsもどきを作ってみます。

Page 1:  折りたたみをjQueryで簡単実現

「折りたたみが最も簡単 details と summary についてメモ」で、Detailsとsummaryについて書きました。実際、最も簡単です。スクリプトも要らず、簡素なHTMLとCSSだけで何とかなります。

理解しやすく簡単ですが、アニメーション効果を付けたい場合には面倒なボックス構成を作る必要がありますし、開くアニメーションはできても閉じるでは動きません。出来るかもしれないが難しいので私は途中放棄しました。この弱点は微妙に致命傷で、動きにこだわらない場合のみ簡単便利に使うことが出来ますが動きの効果が欲しい場合は別の方法をとります。

そこで、近頃使いやすくなったjQueryを使って簡素な折りたたみを作ってみようとちょっとやってみました。 目的と目標は、detailsとsummaryと同じ程度の使用感、そして簡単に作れて手軽に使えることです。

こんな感じの完成品です。 ↓

details と summary と違って、何も考えなくても何も工夫せずとも実現できます。しかも書くべきHTMLタグはdetailsよりシンプルです。div箱ふたつ（クリックするタイトル部分と中身の二つ）だけで成り立ちます。では行きます。

箱を二つ

div を二つ作って、最初の箱がsummaryと同じクリックする部分、二個目の箱が開閉される中身です。jQuery のスクリプトで指定するので、summary に該当する箱に決まった名前のclassを付けます。js-summary と名付けてみました。最初の箱を <div class="js-summary"> </div> としましょう。

js-summary 部分をクリックすると div が展開したり畳まれたりします。以前は展開するコンテナ部分にも名前を付けていましたが、名前は必須ではないのでここではただのdivとします。

HTML

HTMLはこんな感じです。

<div class="js-summary">summaryみたいな部分</div>
<div>コンテナ部分。つまり中身。隠されていてsummaryクリックで展開する部分。</div>

detailsでは大枠を ＜details＞ で括りますがjQuery版では括る必要ありません。でも括りたければdivで括ってもいいでしょう。前後にマージンを指定したいときは括ったほうが便利です。

detailsとsummaryはHTMLタグですが、jQuery版では要素を指し示すセレクタが対象となります。

大事なルールはsummaryもどきの要素とコンテナもどきの要素が並んでいるということです。これを専門用語で隣接しているといいます。上の例では .js-summary のdivと名無しのdivが隣接しています。隣接が大事です。なぜなら、そういうスクリプトを書くからです。 スクリプトでこう命じます。

.js-summary と隣接する要素を表示したり消したりせよ

スクリプト

jQuery('.js-summary').each(function(){
	jQuery(this).on('click',function(){
		jQuery(this).toggleClass('open');
		jQuery(this).next().slideToggle(300);
		return false;
	});
});

.js-summary をクリックしたら、そのクリックした js-summary に ‘open’ というクラスを付けたり外したりして、それから隣接する要素を表示したり消したりします。

toggleClass(‘open’) は ‘open’ が付いていれば消し、付いてなければ追加します。

slideToggle()は表示・非表示をトグルします。このslideToggleがすごいやつで、display: none; をアニメ化します。CSSにしろjavascriptにしろ、アニメ化は連続する数値が成り立つプロパティでしか効果かないのですが、slideToggle は display の表示・非表示をアニメーションしてくれるんです。

さて js-summary にクラス「open」を付けたり外したりしているのはアイコンを変化させるためです。open が付いていると ▼ ついていないと ► こうします。

CSS

.js-summary {
  cursor: pointer;
}

.js-summary:before {
    content: "\f139";
    font-family: "dashicons";
}

.js-summary.open:before {
    content: "\f140";
}

.js-summary + div {
  display: none;
}

装飾を取っ払って基本的なことだけだとこんな感じです。初期状態で折りたたまれている前提です。

ここではアイコン（ ►▼ ）をdashicons で表示しています。

dashicons

dashiconsはwordpressのダッシュボード内に使われているアイコンフォントです。他のアイコンフォントを使っているとか、画像を使うとか、人それぞれな箇所です。

dashiconsをブログで使用するには functions.php で明示的に読み込んでおく必要があります。WordPress では標準で読み込まれていますからログインしていると普通に使用できて表示もされますのでうっかりしがちです。

add_action( 'wp_enqueue_scripts', 'load_dashicons' );
function load_dashicons() {
    wp_enqueue_style( 'dashicons' );
}

dashiconsのアイコンフォントはこちら。  https://developer.wordpress.org/resource/dashicons/

そんなわけでjQuery でかんたん折りたたみでした。このような形になります。

このスクリプトを読み込んでおけば、ブログの本文中に簡単に折り畳みを混ぜ込めます。divを二つ作って最初のdivにクラス .js-summaryを与えるだけ。これは details – summary より簡単と言えますよね。

スライドトグルにclass名を付与した基本型は以上です。が、この記事には続きがあります。

クリックする固まり、detailsでいうところのsummaryにあたる部分ですが、ここが単に折りたたみボタンであれば問題ないのですが、リンクテキストを置きたいという欲望もあるわけです。

続きは次ページ