【CODEMYマンツーマンレッスン後記】～jQueryで目次をスムーズに開閉～

f:id:wp-lesson:20160828144630j:plain

ブログのように縦に長くなるページは
先頭付近に目次を載せると親切です。
　
↓こういうのですね。
─────────────[閉じる]──────────────
3 シリーズ作品一覧
3.1 ナンバリングタイトル
3.1.1 勇者ロトの伝説シリーズ（ロト三部作）
3.1.2 天空シリーズ（天空三部作）
3.1.3 以降の作品
3.2 外伝
3.2.1 不思議のダンジョンシリーズ
3.2.2 ドラゴンクエストモンスターズシリーズ
3.2.3 いただきストリートシリーズ
3.2.4 ドラゴンクエストあるくんですシリーズ
3.2.5 スライムもりもりドラゴンクエストシリーズ
3.2.6 バトルロードシリーズ
3.2.7 ドラゴンクエストヒーローズシリーズ
3.2.8 その他
───────────────────────────────
　
目次をクリックすると記事の部分まで
自動でスクロールしますが、
目次を閉じたり開いたりできると
なお親切だと思いませんか？
　
こういうメニューのような部分を
閉じたり開いたりするときは、
ヌルッと動くほうがカッコいいですね。
　
jQueryを使えば、
　
・slideToggle
・fadeToggle
　
といった開閉式アニメーションが
詰め込まれたメソッドがありますので、
割りと手軽に組み込むことが可能です。