「Jquery入門」slideToggleでコンテンツを出したり隠したりするサンプル
JSコード
$(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); });
CSSコード
#panel,#flip { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; }
HTMLコード
<div id="flip">click me</div> <div id="panel">Hello world!</div>