ボタンを押すと要素を表示するということを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("▼ 開く"); } }); }); });