jquery クリックで内容の表示・非表示の切り替え(ボタンのテキストも入れ替え)

【この記事を読むのに必要な時間は約 11 分です。】

要素を振動させるjqueryプラグインを利用したいと思いデモページを見ていると、「toggle」でソースコードの表示、非表示を切り替えていた。
当サイトでは、ショートコードでtoggle表示できるWordPressプラグインを既に導入しているのだが、jqueryプラグインで、早速自分も利用してみたいと思った。

jQuery toggleメソッド

toggleメソッドを利用して設置してみたが思うように動作しない。というのもjQuery1.9以降toggleメソッドは廃止されたとの事。それでも動かしたい場合は、「jQuery toggleの廃止と解決法」を参考にすればよい。
結論としては、「jQuery Migrate」というjqueryプラグインも追加で読み込めば使えるようだ。ホスティングも利用できるので、以下のようにjQuery本体と一緒に読み込めばよい。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>

jQuery1.9以降で普通に表示するjqueryのコード

「jQuery Migrate」を使わなくても、jQuery1.9以降でtoggleメソッドと同様に動作させることができた。
今回わからなかったのが、ボタンのテキストを入れ替えるやり方。やっと見つけた「jQueryで開閉メニュー&ボタンのテキストを切り替える」という記事が大変参考になった。

ひとつだけ設置する場合

jquery本体とjqueryコードの設置

以下のようにヘッダー部分(<head>と</head>の間)に記載すればよい。早速toggle機能を利用しているので、下のボタンをクリックして欲しい。コードが表示される。

コードを表示する

<!-- jquery hosting -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- /jquery hosting -->
<!-- setting -->
<script type="text/javascript">
$(document).ready(function(){
    $(".codecontent").hide();
    var flg = "close";
    $(".codebtn").click(function(){
        $(".codecontent").slideToggle();
        if(flg == "close"){
            $(this).text("コードを閉じる");
            flg = "open";
        }else{
            $(this).text("コードを表示する");
            flg = "close";
        }
    });
});
</script>
<!-- /setting -->

なお、クラス指定しているが、ひとつしか利用しないのであればID指定でも構わない。また、クラス名は、自分のわかりやすい名前でよい。今回は、「codebtn」と「codecontent」としている。

ワードプレスでワードプレスに組み込み済のjQueryを利用する場合、コンフリクトの問題があり動作しない場合がある。
その場合は、以下のように記載すれば問題なく動作する。

先頭の一文を置き換える
$(document).ready(function(){
     ↓
こちらに変更する
jQuery(document).ready(function($){

ボディ部分への記載

設置したいボディ部分(<body>と</body>の間)に以下のように記載する。

コードを表示する

<p class="codebtn">コードを表示する</p>
<div class="codecontent">
(ここに表示/非表示される内容を記載)
</div>

cssの記載-ボタンの作成

cssファイルの設定は必須ではない。今回使用しているボタンを蛇足ながら説明する。以下のようにヘッダー部分(<head>と</head>の間)に記載している。

コードを表示する

<style type="text/css">
.codebtn {
       width: 120px;                            /*ボタンの幅*/
       text-align: center;                      /*文字位置*/   
       border-top: 1px solid #ccc;              /*ボタン枠の装飾1/4*/
       border-right: 1px solid #999;            /*ボタン枠の装飾2/4*/  
       border-bottom: 1px solid #999;           /*ボタン枠の装飾3/4*/
       border-left: 1px solid #ccc;             /*ボタン枠の装飾4/4*/
       padding: 5px 20px;                       /*パディング*/
       font-weight: bold;                       /*文字の装飾*/
       cursor: pointer;                         /*カーソルの種類*/
       color: #666;                             /*文字の色*/
       text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #aaa;  /*文字の装飾*/
       border-radius: 3px;                      /*ボタン枠を角丸*/
       -moz-border-radius: 3px;                 /*ボタン枠を角丸*/
       -webkit-border-radius: 3px;              /*ボタン枠を角丸*/
       -khtml-border-radius: 20px;              /*ボタン枠を角丸*/
       box-shadow: 1px 1px 2px #E7E7E7;         /*シャドウ*/
       -moz-box-shadow: 1px 1px 2px #E7E7E7;    /*シャドウ*/
       -webkit-box-shadow: 1px 1px 2px #E7E7E7; /*シャドウ*/
       background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc);  /*グラデーション*/
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc)); /*グラデーション*/ 
}
</style>

複数設置する場合

それぞれのボタンに違うクラスを指定している。直接IDを変えて指定してもかまわない。これで複数設置しても対応できる。

コードを表示する

<!-- jquery hosting -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- /jquery hosting -->
<!-- setting -->
<script type="text/javascript">
$(document).ready(function(){
    $(".codecontent").hide();
    var flg = "close";
    var flg2 = "close";
    var flg3 = "close";
    var flg4 = "close"; //設置分
    $(".codebtn1").click(function(){
        $(this).next(".codecontent1").slideToggle();
        if(flg == "close"){
            $(this).text("コードを閉じる");
            flg = "open";
        }else{
            $(this).text("コードを表示する");
            flg = "close";
        }
    });
    $(".codebtn2").click(function(){
        $(this).next(".codecontent2").slideToggle();
        if(flg2 == "close"){
            $(this).text("コードを閉じる");
            flg2 = "open";
        }else{
            $(this).text("コードを表示する");
            flg2 = "close";
        }
    });
    $(".codebtn3").click(function(){
        $(this).next(".codecontent3").slideToggle();
        if(flg3 == "close"){
            $(this).text("コードを閉じる");
            flg3 = "open";
        }else{
            $(this).text("コードを表示する");
            flg3 = "close";
        }
    });
    $(".codebtn4").click(function(){
        $(this).next(".codecontent4").slideToggle();
        if(flg4 == "close"){
            $(this).text("コードを閉じる");
            flg4 = "open";
        }else{
            $(this).text("コードを表示する");
            flg4 = "close";
        }
    });
});
</script>
<!-- /setting -->

なお、複数設置で、最初変数のflgがかぶっていて、open/closeの判定がおかしかったのをblow→inさんからご教授頂いて訂正した。これで問題なく動いている。以上

Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

  • このエントリーをはてなブックマークに追加

良かったらフォローお願いします。

コメント

  1. […] 、jQueryを利用したものが一番使いやすそうでしたので、jquery クリックで内容の表示・非表示の切り替え(ボタンのテキストも入れ替え)|JUMP-UP.INFOこちらの記事を参考に設置しました。 […]