Menu

STEP 7 - eachメソッドでそれぞれの … を実行しよう!

HTML
Hypertext Markup Language の略。Webサイトをマークアップするためのマークアップ言語です。
CSS
Cascading Style Sheets の略。HTML や XML を装飾するために使われる言語です。
JavaScript
プラウザで動作するプログラム言語で、主に HTML や CSS を操作するために使われます。JS と略されることもあります。
jQuery
JavaScript のライブラリのひとつです。比較的習得しやすいため、プログラミングに慣れていない Webデザイナーにも人気のライブラリです。
Photoshop
Webデザインをする上で、写真を補正したり、UIパーツを作るのに人気のソフトウェアです。
Illustrator
イラストを制作するのに適したソフトウェア。Webデザインでは幅広い用途で使われています。
Fireworks
Web制作におけるグラフィックを作成することに特化したソフトウェア。Photoshop や Illustorator に比べ、Web制作ならではの機能が充実しています。

複数のアコーディオンを設置しても、正しく動作するようになりました。

jQuery Code

$(function() {
	$(".accordion").each(function(){
			
		$("> dd:not(:first)", this).hide();
		$("> dt:first", this).addClass("active");	
		$("> dt", this)
		.prepend("<span class='icon'></span>")
		.hover(function(){
			$(this).addClass("hover");
		}, function(){
			$(this).removeClass("hover");
		})
		.click(function(){
			if($(this).next("dd").css("display") == "none"){
				$(this).siblings("dd").slideUp("fast");
				$(this).siblings("dt.active").removeClass("active");
				$(this).addClass("active").next("dd").slideDown("fast");
			}
		});
	});
});

jQuery.com 公式ドキュメント

Chapter 10