jQueryのslideToggle

対応ブラウザ:Firefox,Google Chrome,Safari

ボタン

-jQuery-

$(function(){
$('.button').click(function() {　　/*クリックされた時*/
$('.slideArea').slideToggle();　　/*表示されているものは非表示、非表示されているものは表示*/
});
});

-CSS-

.button{
padding: 2px 4px;
color: #fff;
cursor: pointer;
width: 60px;
text-align: center;
background-color: #069;
background: -moz-linear-gradient(top,#069,#09f 50%,#069);
background: -webkit-gradient(linear,left top,left bottom,from(#069),color-stop(0.5, #09f),to(#069));
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
}
.button:hover{
background: #09c;
background: -moz-linear-gradient(top,#069,#0df 50%,#069);
background: -webkit-gradient(linear,left top,left bottom,from(#069),color-stop(0.5, #0df),to(#069));
}
.slideArea { display: none; }