information
「mootools」は公式サイトでダウンロードしてください。
⇒ http://mootools.net/
比較的簡単にできていてスタイルシートも少ないのでカスタマイズもしやすいかと思います。
body
<p class="accToggler">メニュー1</p> <p class="accContent"> メニュー1の内容 </p> <p class="accToggler">メニュー2</p> <p class="accContent"> メニュー2の内容 </p> <p class="accToggler">メニュー3</p> <p class="accContent"> メニュー3の内容 </p> <p class="accToggler">メニュー4</p> <p class="accContent"> メニュー4の内容 </p>
JavaScript
<script type="text/javascript" src="/js/mootools.js"></script> <script type="text/javascript"> var accordion; var accordionTogglers; var accordionContents; window.onload = function() { accordionTogglers = document.getElementsByClassName('accToggler'); accordionTogglers.each(function(toggler){ //remember the original color toggler.origColor = toggler.getStyle('background-color'); //set the effect toggler.fx = new Fx.Color(toggler, 'background-color'); }); accordionContents = document.getElementsByClassName('accContent'); accordion = new Fx.Accordion(accordionTogglers, accordionContents,{ //when an element is opened change the background color to blue onActive: function(toggler){ toggler.fx.toColor('#6899CE'); }, onBackground: function(toggler){ //change the background color to the original (green) //color when another toggler is pressed toggler.setStyle('background-color', toggler.origColor); } }); } </script>
CSS
<style type="text/css"> <!-- .accToggler{ margin: 3px auto; padding: 3px; width: 500px; background: #acc95f; color: #f4f4f4; border: 1px solid #fff; cursor: pointer; } .accContent{ margin: 0px auto; width: 500px; }