Effet d'accordéon avec CSS et JavaScript

Date de publication : 25/03/2009

Par Rob Glazebrook (Auteur)
 Joris Crozier (Traducteur)
 

Cet article est la traduction de Advanced CSS Accordion Effect (disponible en ici).
Commentez : 8 commentaires

               Version PDF (Miroir)   Version hors-ligne (Miroir)

I. Présentation
II. Le code original
III. Mieux vivre à travers JavaScript
IV. Encore plus facile avec jQuery
V. Liens


I. Présentation

Il y a peu de temps j'avais écrit un article pour montrer comment le populaire effet "accordéon" (comme dans l'image ci-dessus) pourrait être reproduit avec en rien de plus que du CSS. Il y avait cependant une réserve : la technique ne fonctionnait pas avec Internet Explorer 6 en raison du support très limité du pseudo-élément :hover par le navigateur.

Aujourd'hui, la part de marché d'IE6 diminue de jour en jour et nous en sommes sans aucun doute ravis. Mais le navigateur va continuer à maintenir une bonne part de marché pour un certain temps à venir. C'est pourquoi, je voudrais revoir la technique CSS de l'accordéon et apporter une ou deux modifications qui vont lui permettre de fonctionner avec IE6.

Je vais vous avouer d'emblée : ces modifications nécessitent du JavaScript. Alors, quel est le but d'avoir une technique accordéon "CSS" qui utilise JavaScript ? Eh bien, toutes les autres techniques de l'accordéon exigent JavaScript, et presque toutes utilisent un Framework JavaScript. Cette technique est simplement améliorée par JavaScript et tous les navigateurs modernes la supporteront très bien même sans JS activé.



II. Le code original

Nous allons avoir à faire quelques modifications enfantines au CSS par la suite, mais je voulais vous montrer les balises originales pour des raisons de consistance.

Voici le code XHTML que nous utilisons à l'origine : 

<div id="accordion">
 <div id="part1">
  <p>Ce texte est dans la partie 1.</p>
 </div>
 <div id="part2">
  <p>Ce texte est dans la partie 2.</p>
 </div>
 <div id="part3">
  <p>Ce texte est dans la partie 3.</p>
 </div>
 <div id="part4">
  <p>Ce texte est dans la partie 4.</p>
 </div>
</div>
Et voici le CSS : 

#accordion {
    width: 500px;
    margin: 100px auto; 
}

#accordion div {
    float: left;
    width:25%;
    height: 300px;
    overflow: hidden;
}

#accordion:hover div {
    width: 20px; 
}

#accordion:hover div:hover {
    width: 440px;
    overflow: auto; 
}
Si vous voulez mieux comprendre comment tout ceci fonctionne, réferez-vous à en l'article original.


III. Mieux vivre à travers JavaScript

L'idée sur la façon d'améliorer ce script m'est venue un jour alors que je furetais dans les en archives de CSS Newbie (oui, je dois me référer à mes propres archives pour me rappeler comment faire les choses certains jours !). J'ai été relire mon article en Easy Dropdown Menus CSS et je me suis rendu compte que le même JavaScript qui permet à mes menus déroulants d'être survolables (la  technique en Suckerfish) fonctionne aussi bien sur le CSS de mon accordéon.

Voici le code modifié pour l'effet d'accordéon: 

accHover = function() {
    var accContainer = document.getElementById("accordion");
    accContainer.onmouseover=function() {
        this.className+=" hover";
    }
    accContainer.onmouseout=function() {
        this.className=this.className.replace(new RegExp(" hover\b"), "");
    }

    var accDivs = accContainer.getElementsByTagName("div");
    for (var i=0; i<accDivs.length; i++) {
        accDivs[i].onmouseover=function() {
            this.className+=" hover";
        }
        accDivs[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" hover\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", accHover);
Fondamentalement, ce code boucle toutes les divs dans l'accordéon, ainsi que le div contenant l'accordéon lui-même, et applique les fonctions mouseover et mouseout à chacune. Ensuite, lorsque l'utilisateur passe la souris sur la div, cela ajoute une classe "hover". Lorsque l'utilisateur déplace la souris hors de la div, la classe temporaire "hover" est supprimée.

Maintenant tout ce que nous avons à faire c'est d'éditer notre CSS pour une meilleure visibilité, soit sur notre pseudo-classe "hover", soit sur notre nouvelle classe "hover", qui est rendue facile grâce à notre en sélecteur séquentiel. 

#accordion {
    width: 500px;
    margin: 100px auto; 
}

#accordion div {
    float: left;
    width:25%;
    height: 300px;
    overflow: hidden;
}

#accordion:hover div, #accordion.hover div {
    width: 20px; 
}

#accordion:hover div:hover, #accordion.hover div.hover {
    width: 440px;
    overflow: auto; 
}

IV. Encore plus facile avec jQuery

Tous ceux d'entre vous qui me lisent depuis longtemps savent que je suis un grand fan de jQuery. Ainsi, lorsque j'ai commencé à réécrire le script de notre accordéon, j'ai décidé de le faire en jQuery.
Pour tous ceux d'entre vous qui n'utilisent pas jQuery, ce script risque d'être un peu écrasant, car il requiert à vos utilisateurs de télécharger plus de code à la longue (notre petit script plus le Framework jQuery). Mais si vous l'utilisez déjà, cela coupe le lourd lifting au profit de si peu : 

$(document).ready(function() {
    $("#accordion, #accordion div").mouseover(function() {
        $(this).addClass("hover");
    }).mouseout(function() {
        $(this).removeClass("hover");
    });
});
Ce script fait exactement la même chose que notre long JavaScript précédent, mais avec beaucoup moins de code. Donc, c'est tout ce qu'il y a à faire ! Vous pouvez voir une démonstration de cet effet ici.

L'accordéon devrait fonctionner à merveille dans tous les principaux navigateurs avec ou sans JavaScript et le devrait sur IE6 avec JavaScript. Appréciez !


V. Liens

Vous pouvez aussi aller voir mes autres fr traductions.



               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.1!Valid CSS!

Les sources présentées sur cette page sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2009 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.

Vos questions techniques : forum d'entraide JavaScript - Publiez vos articles, tutoriels et cours
et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones
Nous contacter - Hébergement - Participez - Copyright © 2000-2010 www.developpez.com - Legal informations.