STEP 5 - クリックで開く仕組みを作る
- HTML
- Hypertext Markup Language の略。Webサイトをマークアップするためのマークアップ言語です。
- CSS
- Cascading Style Sheets の略。HTML や XML を装飾するために使われる言語です。
- JavaScript
- プラウザで動作するプログラム言語で、主に HTML や CSS を操作するために使われます。JS と略されることもあります。
- jQuery
- JavaScript のライブラリのひとつです。比較的習得しやすいため、プログラミングに慣れていない Webデザイナーにも人気のライブラリです。
クリックで開閉する仕組みを作りました。また、開閉状態を示すためのアイコンも加えます。
jQuery Code
$(function() {
var accordion = $(".accordion");
$("> dd:not(:first)", accordion).hide();
$("> dt:first", accordion).addClass("active");
$("> dt", accordion)
.prepend("<span class='icon'></span>")
.hover(function(){
$(this).addClass("hover");
}, function(){
$(this).removeClass("hover");
})
.click(function(){
if( $(this).next("dd").css("display") == "none" ){
$("> dd", accordion).slideUp("fast");
$("> dt.active", accordion).removeClass("active");
$(this).addClass("active").next("dd").slideDown("fast");
}
});
});