Show/hide une partie d'un bloc de texte

[Blue Bear]

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 :

 

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

 

Merci à tous,

Clément

[Blue Bear]

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.