jQuery で簡単にアコーディオンっぽい動作
ワケあって最近 jQuery オンリーのウェブページをいじることがあるので、今更の jQuery 基礎。
要素をクリックすると、他の要素がビロビロ～っと出てきたり、閉じたりする、いわゆるアコーディオンメニューみたいな動作を簡単に実装できる、jQuery の slideToggle() というメソッドがある。
以下にサンプルを作ってみた。見出しをクリックすると、見出し以外の要素がぎゅる～っと閉じる。もう一度見出しを押すと、どろろ～っと開く。
コードは実質的に1行だけ。見出しである h1 要素をクリックしたら、$(this) = h1 要素以降にある兄弟要素全てに対し、slideToggle() メソッドを適用する。
nextAll() というメソッドもとっても便利ね。
「いまさら jQuery を1から始めるのって、もうとっつきにくいのでは…」という人は、以下のページがとっても素敵。人生で一番若いのは今日なんです。遅すぎるなんてことはないんです。少しでも興味があったら、今日から始めちゃいましょう。