Jump to content

Show/hide une partie d'un bloc de texte


Blue Bear

Recommended Posts

Bonjour à tous, j'ai un texte long sur ma page d'accueil dont j'aimerais caché une partie et offrir la possibilité de voir le reste en appuyant sur un bouton.

L'exemple que je cherche à reproduire se trouve sur le site https://www.glisshop.com/

Plus précisément cette partie : pegdfgpoiheeabli.thumb.png.34283d491b81bdb9e05248c8bfca7c03.png

 

Si quelqu'un a une méthode je suis preneur :) Je suis sur prestashop 1.7.5.

 

Merci à tous,

Clément

Link to comment
Share on other sites

Alors j'avance un peu et ma question se précise :) en fait j'ai besoin de comprendre un peu plus comment fonctionne JQuery - en ce cas me direz-vous pourquoi poser ma question ici ? Je tente au cas où et si ce n'est pas le bon endroit n'hésitez pas à me le dire.

Donc pour faire ce que je souhaite pour l'instant j'utilise le JQuery suivant (dans le dossier lesite/themes/letheme/assets/js) :

// On attend que la page soit chargée
jQuery(document).ready(function()
{
   // On cache la zone de texte
   jQuery('#toggle').hide();
   // toggle() lorsque le lien avec l'ID #toggler est cliqué
   jQuery('button#toggler').click(function()
  {
      jQuery('#toggle').toggle(1000);
      return false;
   });
});

Si cela fonctionne je ne suis pas fan du rendu. Du coup j'aimerais utiliser la fonction fadein() suivante (cf https://codepen.io/BLUEBEAR38/pen/jOOrxjz) :

$('button#toggler').click(function(){
  $('#toggle').fadeIn();
});

Le seul problème est que je ne comprend pas comment ajouter la fonction fadeout() lors du second clic ou simplement l'effet inverse (je ne sais pas comment ca s'appelle j'ai essayé d'insérer un 'return false' comme sur le premier exemple sans succès). Est-ce que quelqu'un s'y connait ?

À cela j'ajouterai que j'aimerais changer de classe certains éléments lorsque je clique une première fois sur le bouton qui déclenche l'apparition du texte.

Merci d'avance !

C.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...