ボタンを押すと要素を表示するということをjQueryで行う場合,showメソッドやtoggleメソッドなどを使用しますが、ボタンに表示されるテキストを要素が表示されている時には「閉じる」・非表示の時には「開く」というようにしたい時があります。
ということで今回は「表示・非表示でボタンのテキストの中身を変更する方法」をご紹介します。
HTML
「ボタンを押すと、リストが表示される」というものを作っていくのでulでリストを作り、ボタンの役目を果たすaタグのみを使用します。とてもシンプル。
<ul class="items"> <li>りんご</li> <li>みかん</li> <li>いちご</li> <li>バナナ</li> </ul> <a id="btn-txt" class="btn">▲ 閉じる</a>
CSS
下のCSSはボタンの装飾をしているだけなので、特に設定しなくても大丈夫です。
.btn{
display: inline-block;
text-align: center;
width: 100px;
padding: 5px 0px;
border-radius:5px;
background: #2389f0;
color: #fff;
}
Script
準備ができたらスクリプトを記述していきます。
$(function() {
$(".btn").on('click', function() {
$(".items").slideToggle(500,alertFunc);
});
function alertFunc(){
if ($(this).css('display') == 'block') {
$("#btn-txt").text("▲ 閉じる");
}else{
$("#btn-txt").text("▼ 開く");
}
};
});
完成
ボタンを押すとリストの動きに合わせて、テキストも変更されているのがわかるかと思います。
See the Pen
表示・非表示でテキスト変更 by HIROKI (@marurain)
on CodePen.
解説
リストの表示・非表示
$('.btn').on('click',function(){
$('.items').slideToggle(500);
});
上記のコードで「.btn」をクリックすると「.items」というリストが表示・非表示することができます。slideToggleの引数の数値は今回は500としましたが、お好みの速さでどうぞ。
コールバックの設定
slideToggleの第2引数にalertFuncを設定します。
こうすることで表示・非表示をした後にfunctionを実行することができます。
$('.items').slideToggle(500,alertFunc);
functionを設定
function alertFunc(){}の中にはif文を記述していきます。
this＝.itemsなので、それが表示されている時（display:block;）は#btn-txtのテキストの内容を「▲ 閉じる」。
表示されていない時(display:none;)はテキストの内容を「▼ 開く」にするという記述をします。
function alertFunc(){
if ($(this).css('display') == 'block') {
$("#btn-txt").text("▲ 閉じる");
}else{
$("#btn-txt").text("▼ 開く");
}
};
完成
最初のコードと繋げれば、完成です！
$(".btn").on('click', function() {
$(".items").slideToggle(500,alertFunc);
});
function alertFunc(){
if ($(this).css('display') == 'block') {
$("#btn-txt").text("▲ 閉じる");
}else{
$("#btn-txt").text("▼ 開く");
}
};
});
補足
alertFunctionは省略して、記述することもできます。
$(function(){
$('.btn').on('click',function(){
$('.items').slideToggle(500,function(){
if ($(this).css('display') == 'block') {
$("#btn-txt").text("▲ 閉じる");
}else{
$("#btn-txt").text("▼ 開く");
}
});
});
});
