【jQuery】開閉ボタンの表示・非表示で中身の文字を切り替える方法

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です