読者です 読者をやめる 読者になる 読者になる

Corredor

ウェブ、プログラミングの勉強メモ。

jQuery で簡単にアコーディオンっぽい動作

ワケあって最近 jQuery オンリーのウェブページをいじることがあるので、今更の jQuery 基礎。

要素をクリックすると、他の要素がビロビロ~っと出てきたり、閉じたりする、いわゆるアコーディオンメニューみたいな動作を簡単に実装できる、jQuery の slideToggle() というメソッドがある。

以下に CodePen でサンプルを作ってみた。見出しをクリックすると、見出し以外の要素がぎゅる~っと閉じる。もう一度見出しを押すと、どろろ~っと開く。

See the Pen Slide Toggle by Neos21 (@Neos21) on CodePen.

コードは実質的に1行だけ。見出しである h1 要素をクリックしたら、$(this) = h1 要素以降にある兄弟要素全てに対し、slideToggle() メソッドを適用する。

nextAll() というメソッドもとっても便利ね。

「いまさら jQuery を1から始めるのって、もうとっつきにくいのでは…」という人は、以下のページがとっても素敵。人生で一番若いのは今日なんです。遅すぎるなんてことはないんです。少しでも興味があったら、今日から始めちゃいましょう。

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート