OfficeExcelゲームゲームのお話ホームウェブ制作JavaScript・JQuery【jQuery】開閉ボタンの表示・非表示で中身の文字を切り替える方法2019年6月11日SHAREツイートシェアはてブLINEPocketボタンを押すと要素を表示するということをjQueryで行う場合,showメソッドやtoggleメソッドなどを使用しますが、ボタンに表示されるテキストを要素が表示されている時には「閉じる」・非表示の時には「開く」というようにしたい時があります。いうことで今回は「表示・非表示でボタンのテキストの中身を変更する方法」をご紹介します。補足HTML「ボタンを押すと、リストが表示される」というものを作っていくのでulでリストを作り、ボタンの役目を果たすaタグのみを使用します。閉じる</a>CSS下のCSSはボタンの装飾をしているだけなので、特に設定しなくても大丈夫です。#fff;}Script準備ができたらスクリプトを記述していきます。開く");}};});完成ボタンを押すとリストの動きに合わせて、テキストも変更されているのがわかるかと思います。CodePen.解説リストの表示・非表示$('.btn').on('click',function(){$('.items').slideToggle(500);});上記のコードで「.btn」をクリックすると「.items」というリストが表示・非表示することができます。slideToggleの引数の数値は今回は500としましたが、お好みの速さでどうぞ。コールバックの設定slideToggleの第2引数にalertFuncを設定します。することで表示・非表示をした後にfunctionを実行することができます。alertFunc(){}の中にはif文を記述していきます。開く」にするという記述をします。開く");}};});補足alertFunctionは省略して、記述することもできます。コメントをキャンセルメールアドレスが公開されることはありません。【CSS】aタグのクリックできる領域を親要素いっぱいに広げる方...次の記事やりたいことは「ない」のではなく「知らない」だけ。やりたいこと...ヒロキWebデザイナーしています。