javascriptとjQueryの基本的な使い方についてまとめてきたので、実際に実用的なものを作ってみます。 まずはWebでもよく使うアコーディオンパネル。ECサイトのカテゴリーリストの開閉なんかでも使われることが多いです。ただ、プラグインを導入するほどでもないようなちょっとしたことが多いのでさくっと自作してみることにします。 jQuery自作するシンプルなアコーディオンパネル ここでは以下のような要件を満たす機能を実装します。 要素をクリックするとリストを表示 表示中の要素をクリックすると閉じる 表示中は−ボタン、閉じてるときは+ボタンを表示 今回ボタンにはFontAwesomeを使用します。HTMLの方はあまり深く考えず構造だけ作っていけばOK。リストは通常時に閉じてるのでcssでdisplay: noneを指定しておきます。 HTML <!DOCTYPE html> <html l
![jQueryでアコーディオンパネルを簡単に自作する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/126b9a5cdf28a429cda511443041942fc213a621/height=288;version=1;width=512/https%3A%2F%2Ftetra-themes.com%2Fwp-content%2Fuploads%2F2014%2F08%2Fjquery-mark-dark.gif)