Div déroulante trop longue

  • Auteur de la discussion Auteur de la discussion bansard
  • Date de début Date de début
Nouveau WRInaute
Bonjour
Je fais appel à vos connaissances car depuis quelques jours je bute sur un problème que je n'arrive pas à résoudre:
J'ai un très long texte (150 lignes) a l'intérieur d'une div déroulante, je n'arrive pas à dérouler le texte entièrement.

https://kanbo.fr/contact

Avez vous une solution ?
Merci.

Ci dessous le cde CSS et JQuery

-----------------------------------------------------------
CSS

/Style du module TEXTE/
.texte-cache {
position: relative;
max-height: 100px; /Hauteur du texte visible avant le clic/
overflow: hidden; /On cache tout ce qui dépasse des 100px/
transition: max-height 1s ease; /* Transition CSS entre l'ouverture et la fermeture*/
}
/Style du module TEXTE lorsqu'il est ouvert/
.texte-cache.ouvert{
max-height: 100vh; /* On lui définit une hauteur max de tout l'écran si nécessaire pour qu'il affiche tout son contenu*/
}
/On stylise l'effet de flou lorsque le module TEXTE est fermé, donc il n'a pas la classe "ouvert"/
.texte-cache:not(.ouvert)::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); /Couleur de notre effet/
}

-----------------------------------------------------------

jQuery

<script>
jQuery(document).ready(function ($) {
$("a.bouton-ouverture").removeAttr("href"); // On supprime le lien de notre bouton

$('.bouton-ouverture').on('click', function(){ // lorsqu'on clique sur le bouton
$('.texte-cache').toggleClass('ouvert'); // On ajoute ou retire la classe CSS "ouvert"

if ($('.texte-cache').hasClass('ouvert')) { // Si le module texte a la classe "ouvert"
$('.bouton-ouverture').html('LIRE MOINS'); // On affiche LIRE MOINS sur le bouton
} else {
$('.bouton-ouverture').html('LIRE PLUS'); // Sinon on affiche LIRE PLUS
}
});
});
</script
 
WRInaute accro
Il faut enlever overflow-y: scroll; ici :

CSS:
.et_pb_text_1 {
    overflow-y: scroll;
}

Et corriger la position aussi (autre problème).
 

➡️ Offre MyRankingMetrics ⬅️

pré-audit SEO gratuit avec RM Tech (+ avis d'expert)
coaching offert aux clients (avec Olivier Duffez ou Fabien Faceries)

Voir les détails ici

coaching SEO
Discussions similaires
Haut