jQueryのSlideToggle()のカスタマイズパターン/アコーディオン開閉時にテキストを変更/lideUP(),slideDown()で画像を切り替える

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

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

slideToggleのリファレンス

結論

SlideToggle()は便利だが拡張機能をつける（アコーディオンの開閉にあわせて画像を変えるなど）するときにつまずくのでSlideUp,SlideDownに分けて処理したほうが後々楽である。

jQueryの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)はリンクタグを押したときに挙動させないようにするために使っています。
投稿が見つかりません。

 <!-- アコーディオン 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>

 <!-- アコーディオン 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>

jQueryのslideUP(),slideDown()で画像を切り替える

$(function () {
          $('.Trigger').on('click', function () {
            if ($(this).parent().parent().next().css('display') == 'none') {
                  $(this).parent().parent().next().slideDown();
                  $(this).parent().parent().next().next().slideDown();
                  $(this).children().attr("src","images/mae.png");
                
            } else {
              
                  $(this).parent().parent().next().slideUp();
                  $(this).parent().parent().next().next().slideUp();
                  $(this).children().attr("src","images/ato.png");    
                
            }
          });
        });

slideToggle（）の場合、開いているか開いていないかの判定が困難なため、スライドを開くslideUP()　とスライドを閉じるslideDown()を個別に指定する。

前提はスライドさせる要素をdisplay:noneで消しておくこと。

display:noneをクリックしたらif文内の処理を行う仕組み。

階層構造が把握しにくいときは、ディベロッパーツールで確認する。