cssのアコーディオン

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

<!-- movie -->
<div class="section">

●●●●●●●●

<a href="" class="acddion-btn" style="text-decoration:none;color:#ffffff;">+ MORE</a>

<div class="acddion-contents">
開くと見えるコンテンツ
</div>

</div>
<!-- movie -->

<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>

<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>