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; }
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 !
Catégorie
Tags
- Androïd
- Apache
- Ardour
- Atom
- bash
- BEM
- Bootstrap
- calDAV
- carDAV
- Casque
- Cheat sheet
- CKEditor
- Commerce
- Compass
- Composer
- CSS
- Docker
- docker4drupal
- Drupal
- Drupal 7
- Drupal 8
- DrupalVM
- Drush
- faderport
- Fancy
- Features
- Font-awesome
- Git
- Github
- GitLab
- GNU
- grid
- Hacking
- htaccess
- html5
- Imce
- Jack
- Javascript
- jplayer
- jQuery
- Lavalamp
- Less
- Lightning
- Linux
- locahost
- memtest usb .img .iso
- Music
- Mysql
- Omega
- owncloud
- Pageant
- Parallax
- php
- phpMyAdmin
- Portainer
- Puphpet
- Putty
- Regex
- Responsive
- Samba
- Sass
- Sécurité
- SEO
- Solcalendar
- Solr
- ssh
- suggestions
- Taxonomy display
- TouchDaw
- Traefik
- Utilitaire
- Vagrant
- vidéo
- VirtualBox
- vlc
- Wamp
- Webform