Vous avez ajouté un accordéon dans Elementor, rempli la section FAQ, enregistré la page et constaté que le premier élément est déplié. Vous ne l’avez pas ouvert. Mais Elementor a décidé pour vous. Ce comportement est codé en dur dans le widget et ne peut pas être modifié dans les paramètres. Pour une page d’atterrissage à la structure soignée, cela fait négligé, et si le premier bloc est lourd, cela casse le rythme visuel de toute la page.

Ce problème existe depuis des années. La documentation officielle le dit clairement: «The first item of the Accordion widget is expanded on page load.» C’est tout. Mais vous n’avez pas à subir un accordéon ouvert de force. Il existe quatre solutions, et chacune est détaillée ci-dessous.

Voici les méthodes pour fermer l’accordéon Elementor par défaut: d’un extrait de code de 30 secondes à des alternatives natives et des extensions avec une case à cocher dans l’interface. Ces méthodes ont été testées sur Elementor 3.27-4.2 (Free et Pro) et fonctionnent sur ordinateur et mobile.

💡 Aperçu rapide:

• Insérez un extrait JavaScript dans un widget HTML ou dans Code personnalisé, et l’accordéon se fermera 100 ms après le chargement
• Remplacez l’Accordéon par le Toggle, un widget Elementor natif où tous les onglets sont fermés par défaut
• Pour les minimalistes: une règle CSS masque le premier élément sans une seule ligne de JavaScript
• Installez The Plus Addons ou Essential Addons et obtenez une bascule native «First tab open» directement dans les paramètres du widget

Méthode 1: extrait JavaScript, universel

La méthode la plus fiable. Elementor ajoute la classe elementor-active au premier élément de l’accordéon au chargement. Il suffit d’attendre le rendu et de supprimer cette classe.

Un extrait en JavaScript pur, sans jQuery:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        const firstItem = document.querySelector('.elementor-accordion-item:first-child');
5
        if (firstItem) {
6
            const title = firstItem.querySelector('.elementor-tab-title');
7
            const content = firstItem.querySelector('.elementor-tab-content');
8
            if (title) title.classList.remove('elementor-active');
9
            if (content) {
10
                content.classList.remove('elementor-active');
11
                content.style.display = 'none';
12
            }
13
        }
14
    }, 100);
15
});
16
</script>

Le délai setTimeout de 100 millisecondes est critique. Sans lui, le script s’exécute avant qu’Elementor ait fini d’initialiser l’accordéon, et les classes ne sont tout simplement pas supprimées. Sur des hébergeurs lents ou des pages comportant une dizaine de widgets, passez-le à 300-500 ms. Les utilisateurs d’Elementor confirment sur le forum: la méthode est stable jusqu’à la version 4.2.

Où l’insérer. Deux options. Premièrement, le widget HTML: faites-le glisser directement au-dessus de l’accordéon dans l’éditeur et collez l’extrait. Le code ne s’exécutera que sur cette page spécifique et ne se chargera pas là où il n’y a pas d’accordéon. Deuxièmement, Elementor → Code personnalisé dans l’administration WordPress: créez une entrée, sélectionnez l’emplacement body et publiez. Le code s’appliquera globalement, ce qui est pratique quand les accordéons sont répartis sur une dizaine de pages.

Si vous avez plusieurs accordéons et devez tous les fermer, remplacez querySelector par querySelectorAll et parcourez la collection:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        document.querySelectorAll('.elementor-accordion-item').forEach(function(item) {
5
            const title = item.querySelector('.elementor-tab-title');
6
            const content = item.querySelector('.elementor-tab-content');
7
            if (title) title.classList.remove('elementor-active');
8
            if (content) {
9
                content.classList.remove('elementor-active');
10
                content.style.display = 'none';
11
            }
12
        });
13
    }, 100);
14
});
15
</script>

Cela n’a pas fonctionné du premier coup? Presque toujours, c’est un problème de timing: augmentez le délai à 1000 ms.

Méthode 2: le widget Toggle au lieu de l’Accordéon

La méthode native la plus simple consiste à ne pas lutter contre l’accordéon mais à utiliser un widget différent. Elementor propose deux outils qui se ressemblent mais se comportent différemment: Accordéon et Toggle.

La différence clé:

Le Toggle est visuellement indiscernable de l’Accordéon: les mêmes titres, les mêmes icônes de flèche, la même animation. Mais tous les onglets sont fermés par défaut, sans code. Ouvrez le panneau des widgets, trouvez Toggle, faites-le glisser sur la page et ajoutez des éléments comme dans l’Accordéon. Terminé.

La seule nuance: le Toggle permet de déplier plusieurs onglets à la fois. Si la logique «un ouvert, les autres fermés» est importante, revenez à la Méthode 1.

Méthode 3: CSS, minimaliste

JavaScript vous semble excessif? Fermez le premier élément avec du CSS pur:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content {
2
    display: none !important;
3
}
4
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-title {
5
    border-bottom-width: 0;
6
}

Le premier sélecteur masque le contenu du premier onglet. Le second supprime la bordure inférieure du titre, ce qui donne une coupure nette sans le contenu. Placez le code dans la section «Avancé → CSS personnalisé» du widget concerné (pour un accordéon particulier) ou dans Apparence → Personnaliser → CSS additionnel (globalement).

Remarque: le CSS ne supprime pas la classe elementor-active mais masque seulement visuellement le contenu. Dans l’arbre DOM, l’onglet reste «actif». Cela n’affecte pas le fonctionnement du site, mais si vous utilisez des analytics personnalisés pour les clics sur l’accordéon ou des scripts tiers liés à la classe, le comportement pourrait vous surprendre. Pour la plupart des scénarios, cette méthode fonctionne et c’est la plus légère.

Si votre thème surcharge les styles d’Elementor, augmentez la spécificité:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content.elementor-active {
2
    display: none !important;
3
}

Cela ne fonctionne toujours pas? Le thème utilise probablement son propre JavaScript pour forcer l’expansion. Revenez à la Méthode 1: l’extrait JS s’exécute plus tard et outrepasse tout comportement du thème.

Méthode 4: des extensions avec une bascule native

Certaines extensions Elementor ajoutent une option «First tab open» à l’Accordéon, un clic au lieu de code. Deux options éprouvées:

The Plus Addons for Elementor. Étend l’Accordéon standard avec l’option Default Open Tab → None, ce qui garde tous les onglets fermés. La version gratuite suffit. En bonus, vous obtenez des accordéons imbriqués, des icônes de la bibliothèque, des shortcodes et des templates Elementor à l’intérieur des onglets. Page WordPress.org.

Essential Addons for Elementor. Deux millions d’installations actives. L’Accordéon de cette extension démarre également avec les onglets fermés: les options Accordion State et Enable FAQ Schema se trouvent directement dans les paramètres du widget. Si Essential Addons est déjà installé pour d’autres widgets (Advanced Data Table, Filterable Gallery), aucune installation supplémentaire n’est nécessaire. Page WordPress.org.

L’inconvénient est évident: installer une extension de plus de 100 widgets pour une seule option, c’est disproportionné. Mais si l’extension fait déjà partie de votre configuration, vous obtenez une solution en un clic.

⁉️🤔 Foire aux questions

Pourquoi Elementor n’ajoute-t-il pas de bascule à l’Accordéon standard?

Les développeurs n’ont pas donné de raison précise. D’après les discussions sur le dépôt GitHub d’Elementor, l’équipe considère que le comportement «premier onglet ouvert» est correct pour l’accessibilité. Les demandes de fonctionnalité sont en attente depuis 2018. La priorité de développement s’est déplacée vers les fonctionnalités IA, les conteneurs Flexbox et la performance. En attendant une bascule, votez pour la demande sur GitHub et utilisez l’extrait de la Méthode 1.

Le script ne fonctionne pas sur mobile. Que faire?

Sur les téléphones et tablettes, Elementor utilise le même balisage, mais le rendu est plus lent: processeurs moins puissants, plus de requêtes asynchrones. Augmentez le délai setTimeout à 500-1000 ms. Déplacer l’extrait vers le pied de page via le hook wp_footer aide également: le script s’exécute en dernier, après tous les styles et le balisage d’Elementor. Sur ordinateur, il n’y a pas de différence, mais sur mobile, c’est perceptible.

Puis-je utiliser une version jQuery?

Oui, mais nous ne le recommandons pas. Depuis la version 3.0, Elementor est passé au JavaScript natif pour le frontend. L’extrait vanilla de la Méthode 1 pèse environ 200 octets contre 87 Ko pour jQuery (minifié) et ne dépend pas du chargement de la bibliothèque. Si votre thème ou d’autres extensions chargent déjà jQuery, il n’y a pas de différence. Mais pour les thèmes modernes en JavaScript pur, comme Hello Elementor, l’option native est meilleure: moins de dépendances, plus de rapidité.

La méthode CSS ne fonctionne pas, le premier élément est toujours visible.

Votre thème surcharge les styles d’Elementor avec une priorité plus élevée ou utilise du JS pour forcer l’expansion. Le CSS est impuissant dans ce scénario: le script du thème s’exécute plus tard et rouvre l’onglet. Seul l’extrait JS de la Méthode 1 résout le conflit chronologiquement: il s’exécute en dernier et prend le contrôle.

L’extrait fonctionne-t-il avec les thèmes personnalisés et les thèmes enfants?

Oui. L’extrait opère sur les classes propres à Elementor: .elementor-accordion-item, .elementor-tab-title et .elementor-tab-content. Celles-ci ne dépendent pas du thème. Nous avons testé sur Hello Elementor, Astra, GeneratePress et Kadence: cela fonctionne de manière identique partout. L’exception concerne les thèmes qui remplacent complètement le balisage des widgets Elementor via des filtres (rare, surtout dans des bundles premium comme Avada).

Accordéon ou Toggle: lequel choisir

Le Toggle résout le problème sans code mais permet aux utilisateurs de déplier plusieurs sections à la fois. Pour une page FAQ ou une section de référence, c’est même un avantage: les visiteurs voient toutes les réponses simultanément. Le Toggle est natif, rapide et ne nécessite pas de maintenir un extrait lors des mises à jour d’Elementor.

Si la logique «un ouvert, les autres fermés» est essentielle, utilisez l’Accordéon et le JavaScript de la Méthode 1. L’extrait de quatre lignes fonctionne de manière fiable, ne dépend pas de la version d’Elementor et clôt définitivement le problème.

Commencez par l’option la plus simple: ouvrez l’éditeur, remplacez l’Accordéon par le Toggle et vérifiez si le comportement vous convient. Si ce n’est pas le cas, revenez à l’extrait. Cinq minutes, et l’accordéon a exactement l’apparence que vous souhaitiez.