Пользовательский плагин 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» в<div id="collapse2" class="collapse"> выше скрыт. Если «коллапс» CSS имеет «display:none», как показано ниже:

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

Обратите внимание:

скрывается, когда он имеет имя класса CSS «collapse».

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
}

Чтобы скрыть сворачиваемое содержимое, нам нужно удалить имя класса CSS «show», как показано ниже:

collapse_content.removeClass('show');

Чтобы показать сворачиваемое содержимое, нам нужно добавить имя класса CSS «show», как показано ниже:

collapse_content.addClass('show');

Где CSS «show» используется для изменения свойств css «display» на «block», как показано ниже:

.show{
    display: block;
}

Note
Чтобы сворачиваемый контент отображался при загрузке страницы, нам нужно добавить «показать» имя класса CSS, например<div class="collapse show">....</div>.

Наконец, нам нужна функция обратного вызова, чтобы метка кнопки была «Скрыть / Показать». Пример:

Функция обратного вызова при отображении сворачиваемого контента:

$('.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 (1кб)

TOC

Пользовательский плагин jQuery и CSS для отображения и скрытия контента