jQueryのtoggleで簡単アコーディオン表示を実装する方法｜DAD UNION – エンジニア同盟jQueryのtoggleメソッドを利用して、クリックアクションで隠れていたコンテンツエリアをアコーディオン風に開閉表示する方法を解説します。 アコーディオン表示の基本概念 まずは基本的な概念として、アコーディオン表示とは、特定の見出しをクリックすると、その直下にあるコンテンツがスライドして表示・非表示になるUIのことを指します。この機能をjQueryのtoggleメソッドを用いて実装してみましょう。 CSSの設定 アコーディオン表示に必要なCSSの記述を以下に示します。デフォルトでは、コンテンツを非表示にしておきます。必要に応じてスタイルをカスタマイズしてください。 <style type="text/css"> <!-- #iWrap{ margin:0 auto; padding: 7px; width: 400px; border: 2px solid #333; } #iWrap
