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>