Plugin jQuery personnalisé et CSS pour afficher et masquer le contenu

The requirement: nous devons afficher un contenu réductible lorsque nous avons cliqué sur le bouton "Afficher" et masquer le contenu réductible lorsque nous avons cliqué sur le bouton "Masquer".

The solution: Créez un plugin jQuery personnalisé.

Démo: clique sur le bouton «afficher».

Note
Voici la solution alternative - la fonctionjQuery toggle().

1. Contenu réductible

Voici un exemple de code HTML pour le contenu réductible:


    




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

L'élément «div» dans<div id="collapse2" class="collapse"> ci-dessus est hide. Où le CSS «collapse» a «display:none» comme ci-dessous:

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

Remarque
Le

est masqué lorsqu'il a le nom de classe CSS «collapse».

2. Plugin jQuery personnalisé

Afin d'afficher le contenu lorsque nous avons cliqué sur le bouton "Afficher", nous devons créer un événement de clic pour le bouton "Afficher" comme ci-dessous:

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

Tout d'abord, nous devons obtenir le sélecteur de contenu réduit de l'attribut href:

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

Ensuite, nous utilisons jQuery pour vérifier si l'élément de contenu réductible a le nom de classe CSS «show»:

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

Afin de masquer le contenu réductible, nous devons supprimer le nom de classe CSS ‘show’ comme ci-dessous:

collapse_content.removeClass('show');

Afin d'afficher le contenu réductible, nous devons ajouter le nom de classe CSS «show» comme ci-dessous:

collapse_content.addClass('show');

Où CSS "show" est utilisé pour changer les propriétés css "display" en "block" comme ci-dessous:

.show{
    display: block;
}

Note
Pour que le contenu réductible soit affiché lorsque la page est chargée, nous devons ajouter un nom de classe CSS «show» comme<div class="collapse show">....</div>.

Enfin, nous avons besoin d'une fonction de rappel pour faciliter le libellé du bouton à «Masquer / Afficher». Exemple:

Fonction de rappel lorsqu'un contenu réductible est affiché:

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

Fonction de rappel lorsque le contenu réductible est masqué:

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

Par conséquent, nous devons passer des fonctions de rappel dans le plugin jQuery comme:

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

Voici le code source final du plugin:

(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));

et jQuery pour utiliser le plugin:

$('.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. Exemple complet


  
    Use jQuery + CSS to display and hide content

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

Télécharger le code source

Téléchargez-le -jQuery-css-to-display-hide-content.zip (1kb)

TOC

Plugin jQuery personnalisé et CSS pour afficher et masquer le contenu