Article du fil d'actualités de CreaWeb2B

N'hésitez pas à commenter et partager

Section cachée qui s’ouvre au clic

par | 17 Sep,2017 | DIVI, Tutoriels, Webdesign

Un petit tutoriel pour réaliser une chose qui m’a été demandée sur un forum facebook.

Les sites réalisés pour les églises semblent utiliser régulièrement une section « Nouveau visiteur » qui est cachée mais disponible sur simple clic.

Afficher une section suite à un clic souris peut être utile dans bien d’autres applications.

Nous allons avoir besoin d’un code en jQuery pour cacher la section et l’afficher lorsqu’un clic sera effectué sur un déclencheur.

Vous pouvez tester le résultat de ce tutoriel en cliquant sur le bouton « En savoir plus ».

Nouveau visiteur

Donec consequat velit pharetra, lobortis ex id, hendrerit neque. Sed in mi porta, sagittis nunc et, ullamcorper nunc. Suspendisse id quam lorem. Morbi interdum lacus urna, quis consequat nisl condimentum et. Donec odio felis, ornare eleifend pharetra sed, convallis sit amet erat. Etiam bibendum rutrum lorem, in placerat tortor gravida ut. Integer gravida pharetra congue. Donec eu interdum nisi, finibus mattis erat. Aenean molestie nisi tellus, non gravida neque facilisis gravida. Mauris sagittis rhoncus turpis, ullamcorper ornare turpis volutpat aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum vulputate urna, ut varius odio pharetra ac. Aenean elementum eleifend eros, vitae finibus lorem lacinia non. Integer tincidunt fermentum diam vel semper.

A présent que nous savons ce que nous allons obtenir, il nous reste à voir comment faire.

Le code va cibler un élément donné (le déclencheur) et afficher la section associée quand on cliquera sur ce dernier. Dans mon exemple, le déclencheur est un bouton, mais il pourrait tout aussi bien s’agir d’un lien, d’une image, d’une icône, d’une section entière… Tout ce que vous voulez. La seule chose qui importe c’est c’est de donner à l’élément déclencheur une classe CSS spécifique.

Ici (pour que le code fourni fonctionne) la classe à donner à notre élément est « nh_button closed » (Le code changera « closed » pour « opened » quand le déclencheur sera appelé).

Au clic sur l’élément de classe « nh_button », le code recherchera une div dont l’id css est « newhere » et changera son statut pour la rendre visible, le déclencheur verra sa classe changer de « closed » vers « openend » pour l’effet de style flèche vers le haut ou vers le bas selon que la div soit ouverte ou fermée.

Voyons simplement ce que nous avons côté builder et le code qu’il nous faut ajouter dans le module code.

Deux choses importantes : la classe « nh_button » pour le déclencheur et l’id « newhere » pour la cible.

Ici le déclencheur est le module bouton et la cible est la ligne contenant ce que l’on souhaite afficher. Vous pouvez ajouter autant de modules que nécessaire à la cible (sachant que la cible pourrait trés bien être une section contenant plusieurs lignes)

Ouvrez les réglages du module bouton (les 3 lignes horizontales sur le côté gauche du module)

Et donnons un titre à notre bouton. Mettez un « # » dans le champ URL du bouton

Vous pouvez donner le style que vous désirez à votre bouton. Réglez l’icône sur « visible », vous n’avez pas à vous préoccuper de choisir une icône car le style utilisera une flèche vers le bas automatiquement.

A présent (le plus important) il faut ajouter la classe CSS « nh_button » à notre bouton déclencheur

Et pour finir, nous devons ajouter l’id CSS « newhere » à notre cible. Ouvrez les réglages de la section (si c’est une section) ou de la ligne (comme dans cet exemple) en cliquant sur les 3 lignes horizontales sur la gauche (cadre bleu pour la section, cadre vert pour la ligne).

Dans l’onglet relatif au CSS, mettez l’id CSS « newhere »

Tout est prêt pour faire fonctionner notre bascule caché/affiché

Placez le code suivant dans le module code. Le style css est utilisé pour les icônes flèche vers le haut et vers le bas selon que la div sera ouverte ou fermée.

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

Ce tutoriel est à présent terminé, n’hésitez pas à poser des questions si vous avez des difficultés à le mettre en oeuvre.