Effet d'accordéon avec CSS et JavaScript

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é.

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éférez-vous à l'article original.

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 :

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 pseudoclasse « hover », soit sur notre nouvelle classe « hover », qui est rendue facile grâce à notre 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; 
}

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 !

Vous pouvez aussi aller voir mes autres traductions.