ログイン
問題4

アコーディオンを作ろう!

アイコン画像

問題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によってアコーディオンのようにしています。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
jQueryAnimationを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる