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

コンテンツを表示および非表示にするカスタムjQueryプラグインとCSS

The requirement：[表示]ボタンをクリックすると折りたたみ可能なコンテンツを表示し、[非表示]ボタンをクリックすると折りたたみ可能なコンテンツを非表示にする必要があります。

The solution：カスタムjQueryプラグインを作成します。

デモ：「表示」ボタンをクリックします。

Note
これが代替ソリューション–jQuery toggle()関数です。

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

以下は、折りたたみ可能なコンテンツのHTMLの例です。


    




Use jQuery + CSS to hide/show collapse content
    
        
    
    
    Bla bla bla bla

上記の<div id="collapse2" class="collapse">の「div」要素は非表示です。 CSSの「崩壊」が以下のように「display:none」を持っている場合：

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

注

は、CSSクラス名が「折りたたまれている」場合は非表示になります。

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

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

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

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

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

次に、jQueryを使用して、折りたたみ可能なコンテンツ要素に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
}

折りたたみ可能なコンテンツを非表示にするには、次のように「show」というCSSクラス名を削除する必要があります。

collapse_content.removeClass('show');

折りたたみ可能なコンテンツを表示するには、次のようにCSSクラス名「show」を追加する必要があります。

collapse_content.addClass('show');

CSSの「show」を使用してcssプロパティ「display」を「block」に変更します。

.show{
    display: block;
}

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

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

折りたたみ可能なコンテンツが表示される場合のコールバック関数：

$('.nav-collapse').html('Hide');//change the button label to be '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. 完全な例


  
    Use jQuery + CSS to display and hide content

    
    
        
    
    
        
            Use jQuery + CSS to hide/show collapse content
            
            
            
            
                Bla bla bla bla

ソースコードをダウンロード

ダウンロード–jQuery-css-to-display-hide-content.zip（1kb）

TOC