💡 Astuce Divi : Rendre le module Accordéon fermable et afficher l’icône manquante

Le module Accordéon de Divi est très pratique pour organiser du contenu sous forme de volets déroulants. Mais si tu l’utilises régulièrement, tu as peut-être remarqué un petit souci d’ergonomie :
👉 Lorsqu’un volet est ouvert, il n’affiche aucune icône, contrairement à l’état fermé. De plus, un clic sur un volet ouvert ne le referme pas, ce qui est parfois frustrant pour l’utilisateur.

Dans ce tutoriel, je te montre comment corriger ces deux problèmes simplement, sans plugin, grâce à un peu de CSS et de jQuery.

✅ Objectif

• Ajouter une icône visible lorsque le volet est ouvert
• Permettre aux utilisateurs de fermer un volet déjà ouvert en cliquant à nouveau dessus

1. Ajoute une classe CSS personnalisée à ton module Accordéon

Avant tout, ouvre les paramètres de ton module Accordéon dans Divi, puis :

1. Va dans l’onglet « Avancé »
2. Ouvre la section « ID et classes CSS »
3. Dans le champ Classe CSS, ajoute : pa-add-accordion-icon

👉 Cela permet d’appliquer les modifications uniquement à ce module accordéon (et pas à tous les autres du site).

2. Ajoute le code CSS pour afficher l’icône quand le volet est ouvert

Colle le code suivant dans Divi > Options du thème > Général > CSS personnalisé :

/* Affiche une icône sur les volets ouverts */
.pa-add-accordion-icon .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title:before {
	display: block;
	content: "e04f"; /* Icône "moins" pleine (opposée à l'icône "plus") */
}

💡 Personnalisation :

• Tu peux changer l’icône en modifiant le code e04f par un autre caractère.
• Si tu veux changer la couleur de l’icône ouverte :

.pa-add-accordion-icon .et_pb_toggle_open .et_pb_toggle_title:before {
	color: #ff6600; /* orange par exemple */
}

3. Ajoute le script jQuery pour rendre le module fermable

Par défaut, un clic sur un volet déjà ouvert ne le referme pas. Ce script corrige cela.

Va dans Divi > Options du thème > Intégration et colle le code suivant dans la zone :
« Ajouter ce code à l’en-tête de votre blog » :

<script>
jQuery(function($){
  $('.et_pb_toggle_title').click(function(){
    var $toggle = $(this).closest('.et_pb_toggle');
    if (!$toggle.hasClass('et_pb_accordion_toggling')) {
      var $accordion = $toggle.closest('.et_pb_accordion');
      if ($toggle.hasClass('et_pb_toggle_open')) {
        $accordion.addClass('et_pb_accordion_toggling');
        $toggle.find('.et_pb_toggle_content').slideToggle(700, function() { 
          $toggle.removeClass('et_pb_toggle_open').addClass('et_pb_toggle_close'); 
        });
      }
      setTimeout(function(){ 
        $accordion.removeClass('et_pb_accordion_toggling'); 
      }, 750);
    }
  });
});
</script>

Résultat 🎉

✔️ Les volets de ton module accordéon peuvent désormais être fermés manuellement
✔️ Une icône « moins » s’affiche quand un volet est ouvert, pour une meilleure lisibilité
✔️ L’expérience utilisateur est bien plus fluide et intuitive !

Besoin d’aide ?

Tu veux aller plus loin dans la personnalisation de ton site Divi ?
💬 Contacte-moi ici pour un accompagnement ou un audit personnalisé !