cssのアコーディオン

css

moreボタンをクリックすると開くアコーディオン

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- movie -->
<div class="section">
 
●●●●●●●●
 
<a href="" class="acddion-btn" style="text-decoration:none;color:#ffffff;">+ MORE</a>
 
<div class="acddion-contents">
開くと見えるコンテンツ
</div>
 
</div>
<!-- movie -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
.acddion-btn{
width:100px;
display:block;
margin:10px auto 20px;
padding:6px 12px;
color:#ffffff;
font-size:14px;
background:#ff0c09;
border-radius:18px;
}
.acddion-contents{
margin:20px 0;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
$(function() {
  var $accBtn = $('.acddion-btn'),
      $accContents = $('.acddion-contents');
   
  $accContents.hide();
  $accBtn.each(function() {
    var flag = "close";
    $(this).click(function(e) {
      e.preventDefault();
      $(this).next().slideToggle();
 
      if(flag == "close"){
        $(this).text("- CLOSE");
        flag = "open";
      }
      else{
        $(this).text("+ MORE");
        flag = "close";
      }
 
    });
  });
});
</script>

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

▲