Effet d'accordéon avec CSS et JavaScript

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

Article lu   fois.

Les deux auteurs

Site personnel

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Présentation

Image non disponible

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 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 :

 
Sélectionnez

<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 :

 
Sélectionnez

#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à 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 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 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 Suckerfish) fonctionne aussi bien sur le CSS de mon accordéon.

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

 
Sélectionnez

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 sélecteur séquentiel.

 
Sélectionnez

#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 :

 
Sélectionnez

$(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 traductions.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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 œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2009 developpez 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'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.