JavaScript Web制作

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

スポンサードリンク
スポンサードリンク

2019/12/26

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

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

javaScriptでやること

・SlideToggle()を実装する
・SlideToggle()の開閉を判別する
・テキストを変更する。

最初に必須な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>
スポンサードリンク
スポンサーリンク

-JavaScript, Web制作
-, ,

Copyright© さくらいらぼ , 2020 All Rights Reserved.