Ouvrir/Fermer un onglet avec jquery

Ouvrir/Fermer un onglet avec jquery

Samedi, Décembre 28, 2013

Une barre ou un onglet :

Qui s'ouvre et change d'intitulé :

Dans cet exemple l'onglet doit rester ouvert si un filtre est sélectionner. Pour cela une fonction jQuery verifie si une variable est contenu dans l'url.

le code du template :

<div class="view-filters">
 Ici le contenu à masquer
</div>
</div>
  <div id="show-filters-bar">
   <div class="hide-filters-button"><div class="hide-bt">Hide filters</div></div>
   <div class="show-filters-button"><div class="show-bt">Show filters</div></div>
</div>

 

le code jquery :

 /////////Ouverture/fermeture du filtre Collection///////
        
        var displayShowButton = function() {
            $('.hide-filters-button').css("display","none");
            $('.show-filters-button').css("display","block");
        };        
        $('.hide-bt').click(function(){
            $('.view-filters').animate({height: ['hide', 'swing']});
            displayShowButton();
        });
        
        var displayHideButton = function() {
            $('.show-filters-button').css("display","none");
            $('.hide-filters-button').css("display","block");
        };
        $('.show-bt').click(function(){
            $('.view-filters').animate({height: ['show', 'swing']});
            displayHideButton();
        });
        
        /* Si une variable est définie dans l'url (filtre) le filtre reste ouvert*/
        if(document.location.search.length) {
            $('.view-filters').css("display","block");
            displayHideButton();
        } else {
            $('.view-filters').css("display","none");
            displayShowButton();
        }
///////// Fin Ouverture/fermeture du filtre Collection/////// 

Et le css :

.page-views-page_collection .view-filters{
    display:none;
}
.page-views-page_collection #show-filters-bar {
    height:22px;
    position:relative;
    z-index:10;
    background-color:#2E3235;
    text-align:center;
    color:#958f8f;
    font-family: 'MarvelRegular';
    font-style:italic;
    font-size:12px;
    font-weight:bold;
    border-bottom:1px #4f5052 solid;
    
}
.page-views-page_collection .show-filters-button .show-bt {
    background: url(../images/show_arrow.png) no-repeat right 8px;
    width:80px;
    padding-right:10px;
    display:inline-block;
    cursor:pointer;
}
.page-views-page_collection .hide-filters-button .hide-bt {
    background: url(../images/hide_arrow.png) no-repeat right 8px;
    width:80px;
    padding-right:10px;
    display:inline-block;
    cursor:pointer;
}


Autre façon plus simple

Le code jquery :

//On considère H2 le lien d'ouverture contenu dans le bloc à ouvrir fermer 
   $("#block-menu-block-4 h2").toggle(function(){
//On récupère la hauteur du bloc par défaut pour definir sa taille d'ouverture
    $("#block-menu-block-4").animate({height:$("#block-menu-block-4 .view-content").get(0).scrollHeight},200);
//On ajoute une classe css pour themer le bouton à l'état ouvert
    $(this).addClass("open");
  },
  function(){
    $("#block-menu-block-4").animate({height:40},200);
    $(this).removeClass("open");
  });

Et un exemple de css :

#block-menu-block-4 {
/*On initialise en position fermé*/
    height:40px;
    overflow:hidden;
}
#block-menu-block-4 h2 {
    width:245px;
    height:40px;
    line-height:40px;
    margin:auto;
    padding-left:48px;
    cursor:pointer;
    background:url(../images/footer-down.png) no-repeat right 16px;
}
#block-menu-block-4 h2.open {
    background:url(../images/footer-up.png) no-repeat right 16px;
}

 

Tags: 

Bienvenue sur le blog !

Il s'agissait au départ d'un recueil de notes donc certains billets sont plutôt succincts.
J'espère que vous y trouverez l'info qu'il vous manque dans votre recherche.
Vos commentaires sont les bienvenus.

Bonne lecture !

Mois / Années

Recherche