jQueryを使ってボタンを押すと中身のテキストが切り替わるスクリプトを実装する

ボタンによって表示部分を開閉、さらにボタンのテキストも変更させるスクリプトを実装する。
管理画面等で情報の表示、非表示を切り替えるような状況を想定。

まずは以下のサンプルの『閉じるボタン』をクリックして見てください。
レポートの部分が開閉、さらにボタンを押す度に『閉じる』と『開く』が切り替わります。

まずはhtmlのソースコードから。

<ul class="report">
<li><span>レポート1</span></li>
<li><span>レポート2</span></li>
<li><span>レポート3</span></li>
<li><span>レポート4</span></li>
</ul>

<a class="switch-btn"><span id="btn-inner">▲ 閉じる</span></a>

続いてスクリプト。

$(function() {
$(".switch-btn").on('click', function() {
$(".report").toggle("fast",alertFunc);
});

function alertFunc(){
if ($(this).css('display') == 'block') {
$("#btn-inner").text("▲ 閉じる");
}else{
$("#btn-inner").text("▼ 開く");
}
};
});

『.switch-btn』をクリックすると『.report』の部分が開閉します。
そして、『.report』がcss(‘display’) == ‘block’)、つまり表示されている場合は『#btn-inner』の中身のテキストを『▲ 閉じる』に変更。
『.report』が非表示の場合は『#btn-inner』の中身のテキストを『▼ 開く』に変更しています。