jQueryAnimation
Googleでログイン
問題4：アコーディオンを作ろう！
今回は簡単なアコーディオンをjqueryで作ってみましょう！
あらかじめエディタに書くコード
<div class="box">
<div class="question">問題</div>
<div class="answer">答え</div>
</div>
<div class="box">
<div class="question">問題</div>
<div class="answer">答え</div>
</div>
<div class="box">
<div class="question">問題</div>
<div class="answer">答え</div>
</div>
¥HTML¥
.box{
margin-bottom: 30px;
}
.question,.answer{
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
}
.question{
background-color: #bbbbbb;
cursor: pointer;
}
.answer{
background-color: #eeeeee;
}
¥CSS¥
期待する画面
解答ソースコード
$(function () {
$(".answer").hide();
$(".box .question").click(function () {
$(this).next().slideToggle();
});
});
¥JavaScript¥
解説
まずanswerをhideで隠します。そしてquestionがクリックされたときに押された要素の次の要素をslideToggleによってアコーディオンのようにしています。
ログインして解答を見る
完了にする！
活動記録をTweetする
