Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Et maintenant, il est temps de vous montrer comment faire une telle bascule.

Le code ciblera l’élément spécifié et le rendra visible ou non lorsque le déclencheur est cliqué. Ici, le déclencheur est un bouton, mais cela peut être un lien, une image, une icône, une section entière … tout ce que vous voulez. La seule chose importante est de donner au déclencheur un certain Classe CSS

La classe « nh_button closed » doit être ici (une seule classe est fermée et est changée en « open » lorsque le déclencheur est démarré)

Si l’on clique sur l’élément avec la classe « nh_button », le code recherche un div avec l’ID « newhere » et les commutateurs réglés sur « visible », la classe de déclenchement passe également de « fermé » à « ouvert » pour indiquer un Appliquez le style CSS.

Inutile d’expliquer davantage, voyons ce que nous avons dans le générateur et quel code nous devons ajouter au module de code.

Dans cet article, je suis déjà dans une section, donc je n’utiliserai que des lignes, mais vous pouvez utiliser toute la section si vous le souhaitez. La classe de déclenchement et l’ID cible sont importants. Ici, le déclencheur est le module de boutons et la cible est la ligne avec le contenu à afficher. Vous pouvez ajouter le nombre de modules dont vous avez besoin à la cible (dans ce cas, une section est préférable pour accéder au contenu de lignes et de colonnes multiples).

Ouvrons les paramètres du module de boutons (3 lignes horizontales sur le côté gauche du module)


Et appelons notre bouton. Définissez l’URL sur « # »

Vous pouvez utiliser les paramètres avancés du bouton pour donner un style à votre bouton. Définissez l’icône pour qu’elle soit visible même si vous ne la survolez pas avec la souris. Vous n’avez pas besoin de sélectionner une icône car le CSS remplace ce style.

La partie suivante et la plus importante est d’ajouter Classe CSS à notre bouton

Et enfin nous devons en ajouter un ID CSS au but. Ouvrez les paramètres de la section (si vous avez une section pour le contenu) ou de la ligne (voici ce que j’ai) en cliquant sur les 3 lignes horizontales à gauche de l’onglet bleu pour la section et l’onglet vert pour cliquer sur la ligne

Et mettez le ID CSS vers « newhere »

Tout est mis en place pour construire notre bascule

Définissons le contenu suivant dans le module de code. Le style CSS s’applique aux icônes des boutons ouverts et fermés.

<style type="text/css">
.nh_button.closed:after {content:"33";}
.nh_button.opened:after{content:"32";}
</style>
<script type="text/javascript">
 jQuery(document).ready(function() {
// Hide the div
jQuery('#newhere').hide();
jQuery('.nh_button').click(function(e){
e.preventDefault();jQuery("#newhere").slideToggle();
jQuery('.nh_button').toggleClass('opened closed');
});
});
</script>

Vous avez terminé. N’hésitez pas à demander si vous avez des questions à ce sujet.



Source link

Recent Posts