Comment afficher ou masquer une section sur Cliquez dans Elementor

Principaux points à retenir

• Elementor n'a aucun contrôle dédié pour afficher ou masquer une section en cliquant, les trois méthodes de travail sont donc le widget Accordéon, un widget de bascule de contenu et un bouton avec un script court.
• Le widget Elementor Accordéon cache tous les widgets à l'intérieur d'un élément jusqu'à ce que son titre soit cliqué, et l'état par défaut défini sur Tous les éléments réduits maintient l'élément fermé lors du chargement de la page.
• Le widget Master Addons Toggle Content fonctionne comme un commutateur d'affichage et de masquage lorsque l'une de ses deux options reste vide et que l'autre maintient la section.
• Un bouton peut afficher ou masquer n'importe quel conteneur Elementor avec une dizaine de lignes de JavaScript dans un widget HTML, en utilisant une classe CSS sur le bouton et une sur le conteneur.
• Les conditions d'affichage de l'élémenteur et les paramètres de masquage réactif ne réagissent pas aux clics, car ils décident de ce qui s'affiche par règle ou par appareil avant que le visiteur ne fasse quoi que ce soit.

Pour afficher ou masquer une section en cliquant sur Elementor, placez la section à l'intérieur de quelque chose qui s'ouvre en cliquant sur Le widget Accordéon fait cela sans plugin supplémentaire Une bascule de contenu vous donne un commutateur Afficher et masquer Un bouton avec quelques lignes de script peut révéler n'importe quel conteneur sur la page Elementor n'a pas une seule “afficher sur le paramètre click”, donc l'un de ces trois est l'itinéraire.

Chaque méthode ci-dessous a été construite et testée sur Elementor 4.3. Choisissez l'apparence du déclencheur : une barre de titre, un interrupteur ou un bouton.

Quelle méthode correspond à votre page

Les trois méthodes cachent une section jusqu'à un clic. Ils diffèrent par ce que le visiteur clique et la quantité de configuration dont il a besoin.

Méthode 1 : Le widget Accordéon

Le widget Accordéon est le moyen le plus rapide d'afficher une section en cliquant, car chaque élément est un conteneur qui accepte n'importe quel widget. Tout ce que vous mettez à l'intérieur reste caché jusqu'à ce que le titre soit cliqué.

1. Modifier la page avec Elementor et faire glisser le Accordéon widget à l'endroit où la section cachée doit être.
2. Supprimez les éléments dont vous n'avez pas besoin Pour une section cachée, conservez un élément.
3. Tapez le titre sur lequel les visiteurs cliqueront, comme Afficher les détails de livraison.
4. Cliquez à l'intérieur de l'élément et ajoutez votre contenu : texte, images, un formulaire ou une disposition de conteneur entière.
5. Ouvrir Interactions et ensemble État par défaut à Tout s'est effondré.

La limite de cette méthode est le look Le déclencheur est toujours une barre de titre directement au-dessus du contenu Si vous avez besoin d'un bouton stylisé, ou d'un déclencheur ailleurs sur la page, utilisez la Méthode 3. pour plus de styles de titre, le Widget Accordéon avancé est une option.

Méthode 2 : Un contenu bascule avec une option vide

Une bascule de contenu bascule normalement entre deux blocs Laisser un bloc vide et il devient un commutateur de show and hide : une étiquette ne montre rien, l'autre montre votre section.

Ces étapes utilisent Basculer le contenu de Master Addons Pro. Nous avons testé l'option vide sur Elementor 4.3 et elle ne laisse aucun espace ni espace réservé.

1. Glisser Basculer le contenu sur la page.
2. Dans le Éléments listez, étiquetez le premier élément Masquer les détails et supprimez l'exemple de texte afin que son contenu soit vide.
3. Étiqueter le deuxième élément Afficher les détails Écrivez le contenu dans l'éditeur, ou définissez taper à la pour modéliser et choisir un modèle enregistré pour une mise en page complète.
4. Ouvrir Basculer les paramètres et partez Indice actif sur 1, donc la page se charge avec la section cachée.
5. Définir poste à Avant si l'interrupteur doit se placer au-dessus de la section, ou Après pour le mettre en dessous.

Le commutateur rend l'état évident, ce qui convient aux détails facultatifs tels que les faits nutritionnels, les spécifications techniques ou les termes Pour le retourner dans l'autre sens, avec la section visible en premier, définissez l'indice actif sur 2.

Basculer entre deux sections ? Le Basculer la page du widget Contenu dispose de commutateurs de facturation, de tableaux de spécifications et de huit autres démos en direct.

Méthode 3 : Un bouton et un script court

Utilisez un script lorsque le déclencheur doit être un bouton normal, ou lorsque le bouton et la section sont à des endroits différents Vous ajoutez une classe CSS au bouton, une à la section, et collez un petit extrait dans un widget HTML.

1. Ajouter un Bouton widget. Dans Avancé > Classes CSS, tapez show-hide-button. Laissez le champ de lien du bouton vide.
2. Sélectionnez le conteneur que vous souhaitez cacher Dans Avancé > Classes CSS, tapez show-hide-target.
3. Glisser un html widget n'importe où sur la page et collez le code ci-dessous.
4. Mettez à jour la page et testez-la sur le front-end.

<style>
.show-hide-target { display: none; }
.show-hide-target.is-open { display: flex; }
.elementor-editor-active .show-hide-target { display: flex; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".show-hide-button a, .show-hide-button button").forEach(function (button) {
    button.addEventListener("click", function (event) {
      event.preventDefault();
      document.querySelectorAll(".show-hide-target").forEach(function (target) {
        target.classList.toggle("is-open");
      });
    });
  });
});
</script>

La première règle de style cache le conteneur La seconde l'affiche une fois que le script a ajouté le is-open classe. Le troisième garde le conteneur visible à l'intérieur de l'éditeur Elementor, vous pouvez donc toujours le modifier Chaque clic sur le bouton ajoute ou supprime la classe.

Trois notes sur cette méthode Chaque conteneur avec la classe s'ouvre ensemble, alors utilisez différents noms de classe si vous avez besoin de paires séparées sur une page Le texte du bouton ne change pas tout seul Et si un plugin de mise en cache ou d'optimisation de script retarde JavaScript, le premier clic peut être ignoré jusqu'à ce que le script se charge.

Si la section doit s'ouvrir sur la page, utilisez une fenêtre contextuelle Voir comment ajouter une fenêtre contextuelle dans Elementor.

Ce qui ne fonctionne pas : Conditions d'affichage et paramètres réactifs

Deux fonctionnalités d'Elementor semblent devoir le faire et ne le font pas. Tous deux masquent le contenu, mais aucun des deux ne réagit en un clic.

• Paramètres réactifs. Avancé > Responsive a Masquer sur le bureau, Masquer sur la tablette et Masquer sur le mobile Ils masquent un élément par taille d'écran, tout le temps.
• Conditions d'affichage. Conditions d'affichage de l'élémenteur afficher ou masquer un élément par règle, comme l'état de connexion, le rôle de l'utilisateur, la date ou le navigateur La décision est prise lors du chargement de la page.

Ce sont les bons outils lorsque le site doit décider ce qu'un visiteur voit Nous les couvrons Conditions d'affichage des éléments& le Extension Conditions d'affichage page répertorie toutes les règles qu'il prend en charge Lorsque le visiteur doit décider, utilisez l'une des trois méthodes de clic ci-dessus.

Questions fréquemment posées

Réflexions finales

Il existe trois façons fiables d'afficher ou de masquer une section lors d'un clic dans Elementor. Utilisez le widget Accordéon lorsqu'une barre de titre est correcte, un bouton de basculer de contenu avec une option vide lorsque vous souhaitez un commutateur visible et un bouton avec un script court lorsque le déclencheur doit s'asseoir ailleurs.

Si vous finissez par basculer entre deux sections plus souvent que d'en cacher une, le Basculer le widget Contenu est construit pour cela.

Lecture connexe

• Conditions d'affichage des éléments : afficher et masquer le contenu par règle
• Comment ajouter une fenêtre contextuelle dans Elementor
• Effets de défilement des éléments
• Comment créer un bouton bascule dans Elementor (3 façons)
• Bascule de l'élémenteur vs accordéon vs tabs vs commutateur de contenu