jQueryでテキストを切り替える - WEBサイト制作の勉強

jQueryでテキストを変更するには「.text()」を使用します。

<script>
$(function(){
$('#btn').text('閉じる');
});
</script>
</head>

<body>
<p id="btn">もっと見る</p>
</body>

flgを使ったスイッチの作成

ボタンを押すたびに「もっと見る」と「閉じる」が切り替わるようにjqueryを設定します。
ボタンを押すたびにON・OFFを切り替えるスイッチ的な物は以前であれば「Toggle」を使って簡単に出来ましたが、jQuery1.9以降で廃止されたので、代わりに「flg」を使ってON・OFFのスイッチを作ります。

<script>
$(function(){
  var flg = "off";
  $('#btn').on('click', function(){
    if(flg == "off"){
      $(this).text('閉じる');
      flg = "on";
    }else{
      $(this).text('もっと見る');
      flg = "off";
    }
  });
});
</script>
</head>

<body>
<p id="btn">もっと見る</p>

</body>

クリックイベントの際にa要素の動きに制限を掛ける

a要素にjQuery等でクリックイベントを指定する際、気を付けなければいけないのが、本来a要素が持っている動作とのバッティングです。
まずはa要素が本来持っている動作を再確認しましょう。

HTML の <a> 要素 (アンカー要素) は、別のウェブページ、ファイル、同一ページ内の場所、電子メールアドレス、または他の URL へのハイパーリンクを作成します。

とあるように本来、a要素の役割はhref属性内に記述されている場所へのリンク（移動）です。
では普段演習で記述しているような

<a href="#">テキストリンク</a>

こういった場合の「"#"」とはhtml内のどこに当たるでしょうか。

クリックイベントにreturn falseを指定する

こういったようにa要素にjQueryなどでクリックイベントを指定する場合にはバッティングしないように、a要素本来のハイパーリンク機能を無効にする必要があります。
その場合、クリックイベント内にreturn falseを指定します。

<script>
$(function(){
  var flg = "off";
  $('#btn').on('click', function(){
    if(flg == "off"){
      $(this).text('閉じる');
      flg = "on";
    }else{
      $(this).text('もっと見る');
      flg = "off";
    }
		return false;
  });
});
</script>
</head>

<body>
<p id="btn"><a href="#">もっと見る</a></p>
</body>