【JavaScript】jQueryのSlideToggle()でアコーディオン開閉時にテキストを変更する。

アコーディオン処理を加えるときにとても楽ちんなのがjQueryのSlideToggle()です。
短い文でかんたんにアコーディオン開閉時を実装できます。

SlideToggle()とともに「もっと見る」「閉じる」のようなボタンのテキストを変化させたいことがあります。
今回はそのサンプルを紹介します。

javaScriptでやること

最初に必須なjQueryの読み込み方

jQueryをページに読み込むときには公式サイトjQueryよりファイルをダウンロードし自身のサーバーへアップロード
もしくはGoogleのCDNを使ってjQueryのライブラリファイルを読み込みます。

jQueryに関してはどちらも無料で利用ができます。

・公式サイトjQueryからダウンロードするメリット・デメリット
自身のサーバーに置いておけるのでネットワーク環境に依存しない
バージョンアップは自分で行うこと

CDNを使ってjQueryのライブラリファイルを読み込みするメリット・デメリット
最新版を読み込める
外部サーバーから読み込むため、外部サーバーがダウンしたら使えなくなる。またネットワークで遮断していると使えない

CDNの方が楽ですが、ページの速度を優先したり、限定したネットワーク環境の場合には
jQueryライブラリをサーバーへアップロードして使ったほうが無難です。

jQueryのサイトで紹介されているCDNは

・Google CDN
・Microsoft CDN
・CDNJS CDN
・jsDelivr CDN

とありGoogle CDNが一般的によく使われているように見受けられます。

3.x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
2.x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
1.x snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

サンプル

See the Pen
SlideToggle by miccyome (@miccyome)
on CodePen.

SlideToggleのサンプルはトグルボタンが上においてあるサンプルが多いので、
下にもおけますよという内容です。

SlideToggleの開閉のチェックは、
「開く要素が消えている状態 = 閉まっている」とし

.css('display') == 'none' を使って
条件を判定しています。

条件が合いSlideToggleが開いたらhtmlを書き換える.html()を使って
リンクタグのテキストを書き換えています。

javascript:void(0)はリンクタグを押したときに挙動させないようにするために使っています。

あわせて読みたい

古いサイトでたまに見かけるaタグ「javascript:void(0);」の意味【WEB制作】 古いサイトの修正をするときに見かけることがあるのが 「javascript:void(0);」 aタグの画面遷移を無効化するために使われていますが、 どんなメリット・デメリットがあ...

 <!-- アコーディオン OPEN-->
 <div class="close_more">
スライドトグル中身                            
</div>
 <p class="more"><a href="javascript:void(0);">もっと読む</a></p>
                    
                    
                    
 //スライドトグル中身を開く処理
<script>
$( '.more' ).click( function(){
        
        if( ($('.close_more').css('display') == 'none' )) {
            console.log("開いた");
            $( '.more' ).html('<a href="javascript:void(0);">閉じる</a>');
        } else {
            console.log("消えた");
            $( '.more' ).html('<a href="javascript:void(0);">もっと読む</a>');
        }
        $(this).prev( '.close_more' ).slideToggle() ;
}) ;
</script>