コンテンツを表示したり非表示にするカスタムjQueryプラグインとCSS

getdocs

7年前

Demo:「表示」ボタンをクリックします.

注意** ここに代替のリンクがあります://jquery/jquery-toggle-example-to-display-and-hide-content/[jQuery toggle（）]関数

1.折りたたみ可能なコンテンツ

折りたたみ可能なコンテンツのHTMLの例を以下に示します。

<section class="round-border">
    <h2>Use jQuery + CSS to hide/show collapse content</h2>
    <div>
        <button href="#collapse2" class="nav-collapse">Show</button>
    </div>
    <div id="collapse2" class="collapse">
    <p>Bla bla bla bla</p>
    </div>
</section>

上記の<div id = “collapse2” class = “collapse”>の “div”要素は非表示です。 CSSの「折りたたみ」が以下のように「表示:なし」の場合:

.collapse {
    display: none;
    position: relative;
    overflow: hidden;
}

注意<div>は、CSSクラス名が “崩壊”しているときは非表示になっています。

2.カスタムjQueryプラグイン

‘表示’ボタンをクリックしたときにコンテンツを表示するには、以下のように ‘表示’ボタンのクリックイベントを作成する必要があります。

$('.nav-collapse').click(function(){
   //logic to show/hide collapsable content
});

まず、折りたたみコンテンツのセレクタを属性hrefから取得する必要があります。

var collapse__content__selector = $(this).attr('href');

次に、jQueryを使用して、折りたたみ可能なコンテンツ要素に「show」というCSSクラス名があるかどうかを確認します。

var collapse__content = $(collapse__content__selector);
if(collapse__content.hasClass('show')){
   //logic to hide the collapsable content
}else{
   //logic to show the collapsable content
}

折りたたみ可能なコンテンツを隠すには、以下のようにCSSクラス名 ‘show’を削除する必要があります:

collapse__content.removeClass('show');

折りたたみ可能なコンテンツを表示するには、以下のようにCSSクラス名 ‘show’を追加する必要があります:

collapse__content.addClass('show');

CSSの “show”はCSSのプロパティ “display”を以下のように “block”に変更するために使用されます:

.show{
    display: block;
}

注意** ページが読み込まれるときに折りたたみ可能なコンテンツを表示するには、 `<div class =” collapse show “> …. </div>`のような “show” CSSクラス名を追加する必要があります。

最後に、ボタンラベルを「表示/非表示」にするためのコールバック関数が必要です。例:

折りたたみ可能なコンテンツが表示されているときのコールバック関数:

$('.nav-collapse').html('Hide');//change the button label to be 'Hide'

折りたたみ可能なコンテンツがhideの場合のコールバック関数:

$('.nav-collapse').html('Show');//change the button label to be 'Show'

したがって、コールバック関数をjQueryプラグインに渡す必要があります:

{
  onShow: function(){
    $(this).html('Hide');//change the button label to be 'Hide'
  },
  onHide: function(){
    $(this).html('Show');//change the button label to be 'Show'
  }
}

以下は、プラグインの最終的なソースコードです:

(function($) {
  $.fn.collapse=function(options){
    $(this).click(function(){
       //get collapse content selector
        var collapse__content__selector = $(this).attr('href');

       //make the collapse content to be shown
        var collapse__content = $(collapse__content__selector);
        if(collapse__content.hasClass('show')){
            collapse__content.removeClass('show');
            $(this).html('Show');
            if(options && options.onHide){
                options.onHide();
            }
        }else{
            collapse__content.addClass('show');
            if(options && options.onShow){
                options.onShow();
            }
        }
    });
  }
}(jQuery));

プラグインを使用するjQuery:

$('.nav-collapse').collapse({
    onShow: function(){
        $(this).html('Hide');//change the button label to be 'Hide'
    },
    onHide: function(){
        $(this).html('Show');//change the button label to be 'Show'
    }
});

3.完全な例

<html>
  <head>
    <title>Use jQuery + CSS to display and hide content</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script>
    <script>
    $(document).ready(function() {
        $('.nav-collapse').collapse({
          onShow: function(){
            $(this).html('Hide');//change the button label to be 'Hide'
          },
          onHide: function(){
            $(this).html('Show');//change the button label to be 'Show'
          }
        });
    });

    (function($) {
        $.fn.collapse=function(options){
        $(this).click(function(){
           //get collapse content selector
            var collapse__content__selector = $(this).attr('href');

           //make the collapse content to be shown
            var collapse__content = $(collapse__content__selector);
            if(collapse__content.hasClass('show')){
                collapse__content.removeClass('show');
                $(this).html('Show');
                if(options && options.onHide){
                    options.onHide();
                }
            }else{
                collapse__content.addClass('show');
                if(options && options.onShow){
                    options.onShow();
                }
            }
          });
        }
        }(jQuery));

        </script>
        <style>
            .collapse {
              display: none;
              position: relative;
              overflow: hidden;
            }

            .show{
                display: block;
            }

            .round-border {
                border: 1px solid #eee;
                border: 1px solid rgba(0, 0, 0, 0.05);
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                border-radius: 4px;
                padding: 10px;
                margin-bottom: 5px;
            }
        </style>
    </head>
    <body>
        <section class="round-border">
            <h2>Use jQuery + CSS to hide/show collapse content</h2>
            <div>
            <button href="#collapse2" class="nav-collapse">Show</button>
            </div>
            <div id="collapse2" class="collapse">
                <p>Bla bla bla bla</p>
            </div>
        </section>
    </body>
</html>