このサンプルは、jQueryのslideToggle(), toggleClass()APIを利用してパネルをスライドさせます。サンプルの[Slide Panel]ボタンをクリックするとパネルがスライドしてテキストが表示されます。再度ボタンをクリックするとパネルが閉じます。
ここでは、anchor要素にclick時のイベントハンドラを登録しています。ボタン(anchor)をクリックすると、slideToggle()でpanel要素をスライドさせて表示します。そしてボタンの上下の矢印を切り替えるためにtoggelClass()を実行してanchor要素のclass属性に「active」を設定します。これでボタンの矢印が切り替わります。
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active");
return false;
});
<div id="panel">
ここにコンテンツを記述します・・・
</div>
<p class="slide">
<a href="#" class="btn-slide">Slide Panel</a>
</p>