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