「Jquery入門」slideToggleでコンテンツを出したり隠したりするサンプル

2019年12月18日

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>