Jump to content
Blue Bear

Show/hide une partie d'un bloc de texte

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

Share this post


Link to post
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.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More