ボタンによって表示部分を開閉、さらにボタンのテキストも変更させるスクリプトを実装する。
管理画面等で情報の表示、非表示を切り替えるような状況を想定。
まずは以下のサンプルの『閉じるボタン』をクリックして見てください。
レポートの部分が開閉、さらにボタンを押す度に『閉じる』と『開く』が切り替わります。
まずは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』の中身のテキストを『▼ 開く』に変更しています。