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