Masquer puis Afficher texte long
furyfatal
Bonjour,
Je n'arrive pas à afficher les textes trop longs que j'ai masqué partiellement par défaut. Cela ne marche que pour le dernier. Voici mon code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lire la suite</title>
<style>
.next {
padding:5px 8px;
border:1px solid;
border-radius:25px;
background-color: #e2e2d2;
cursor: pointer;
display:none; /* Caché par défaut */
position:absolute;
bottom:0;
z-index:99;
}
.post {
max-width: 500px;
overflow: hidden;
position:relative;
z-index:1;
}
hr {margin:30px auto}
</style>
</head>
<body>
<div class="post">
<p>Message 1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, tempora nesciunt enim tenetur exercitationem sed sint dolorum dolore incidunt nobis quis laboriosam nam molestiae repellat aut blanditiis nisi maxime harum vitae ducimus non explicabo vel quod. Corrupti illo doloribus ratione, quasi fuga provident unde repellendus saepe porro similique voluptates dolor quam voluptatem deserunt alias voluptate maiores reprehenderit, eaque voluptas repudiandae. Aut aliquam ad aliquid sed dolore pariatur voluptatibus qui dolorum asperiores quos deleniti doloremque voluptate at accusamus voluptatem recusandae deserunt assumenda in, distinctio modi dicta! Dolor, molestiae? Ratione ipsum numquam nobis debitis eveniet omnis, laborum eos asperiores illo dolores quas consectetur maxime distinctio doloribus dolore veniam incidunt reprehenderit corporis. Quisquam facilis, id cumque numquam explicabo, nulla velit provident dolorum excepturi alias assumenda iusto sint impedit. Dolor error ducimus cupiditate exercitationem quam voluptas molestias, dignissimos odio, esse vero est saepe. Beatae praesentium quod voluptates dicta labore exercitationem sequi quis qui voluptate. Dignissimos harum error, blanditiis voluptatum molestiae corporis omnis doloremque deserunt voluptates ad accusamus, rem enim reprehenderit nemo perferendis adipisci! Veniam, non voluptatum nulla commodi placeat adipisci debitis aut nisi facere. Quia similique provident qui dicta eveniet quos temporibus molestias nisi, commodi perspiciatis, aliquam inventore. Atque excepturi voluptatum accusantium sunt !!</p>
<button class="next">Lire la suite</button>
</div>
<hr>
<div class="post">
<p>Message 2. Lorem ipsum dolor sit amet, consectetur adipisicing el !!</p>
<button class="next">Lire la suite</button>
</div>
<hr>
<div class="post">
<p>Message 3. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis labore consequatur aspernatur nesciunt cupiditate? Labore, ducimus. Alias explicabo quas est voluptatibus nisi. Voluptatibus ab facere incidunt tempora numquam quam in consectetur magnam necessitatibus placeat suscipit nulla sit unde deserunt, eos accusamus magni temporibus consequatur fuga dolorum, impedit corrupti enim? Culpa numquam incidunt cumque earum suscipit veniam? Aperiam dolore, eligendi nam mollitia alias quidem illum modi officia odit saepe assumenda a perspiciatis, fugiat earum iusto reiciendis hic ab doloribus beatae cum aliquid? Consectetur, magnam labore hic beatae repudiandae iure eius. Aspernatur, vel eaque vero beatae, magnam eos est amet dolorem voluptatibus minus tempore commodi quidem impedit explicabo eum! Mollitia iure perferendis, libero iusto nostrum quod similique, aliquid ipsa eum fugit in laboriosam, cumque neque corporis quam deserunt quo nam consequatur dolorum. Consequatur hic, sequi laborum animi ab aut quas rerum nam voluptates! Eveniet autem nihil ratione quidem ipsa dolore similique voluptatum quas ea explicabo saepe laudantium quisquam reiciendis iste cupiditate quibusdam sequi excepturi, ipsum numquam? Mollitia eius temporibus sequi non esse beatae quia sunt pariatur commodi labore, quo a perspiciatis itaque quod qui dolor iste quibusdam! Quidem pariatur nobis consequuntur omnis harum dolores quod quia assumenda laudantium voluptates voluptatem vitae provident earum praesentium doloremque quasi repudiandae nisi, dignissimos reprehenderit, molestias saepe incidunt eveniet velit. Sunt facilis reprehenderit delectus, fugiat pariatur quos esse officiis, quod repellat temporibus ut dolorum nesciunt suscipit dicta ratione et similique veniam. Consectetur maiores explicabo fugit a, ipsam quas. Error quo consectetur magni voluptate aut eveniet. Est optio officiis facere animi am !!</p>
<button class="next">Lire la suite</button>
</div>
<hr>
<div class="post">
<p>Message 4. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Debitis labore consequatur aspernatur nesciunt cupiditate? Labore, ducimus. Alias explicabo quas est voluptatibus nisi. Voluptatibus ab facere incidunt tempora numquam quam in consectetur magnam necessitatibus placeat suscipit nulla sit unde deserunt, eos accusamus magni temporibus consequatur fuga dolorum, impedit corrupti enim? Culpa numquam incidunt cumque earum suscipit veniam? Aperiam dolore, eligendi nam mollitia alias quidem illum modi officia odit saepe assumenda a perspiciatis, fugiat earum iusto reiciendis hic ab doloribus beatae cum aliquid? Consectetur, magnam labore hic beatae repudiandae iure eius. Aspernatur, vel eaque vero beatae, magnam eos est amet dolorem voluptatibus minus tempore commodi quidem impedit explicabo eum! Mollitia iure perferendis, libero iusto nostrum quod similique, aliquid ipsa eum fugit in laboriosam, cumque neque corporis quam deserunt quo nam consequatur dolorum. Consequatur hic, sequi laborum animi ab aut quas rerum nam voluptates! Eveniet autem nihil ratione quidem ipsa dolore similique voluptatum quas ea explicabo saepe laudantium quisquam reiciendis iste cupiditate quibusdam sequi excepturi, ipsum numquam? Mollitia eius temporibus sequi non esse beatae quia sunt pariatur commodi labore, quo a perspiciatis itaque quod qui dolor iste quibusdam! Quidem pariatur nobis consequuntur omnis harum dolores quod quia assumenda laudantium volupta !!</p>
<button class="next">Lire la suite</button>
</div>
<script>
var posts = document.querySelectorAll(".post");
// console.log(posts.length); // Trouve 4 dans notre exemple
for (var i=0; i<posts.length; i++) {
var h = document.querySelectorAll(".post")[i].clientHeight; // Connaitre hauteur : clientHeight ou offsetHeight
// console.log(h); // Trouve respectivement 414 ,18, 486... pour la hauteur de nos textes
if (h>200) {
var post = document.querySelectorAll(".post")[i];
var button = document.getElementsByClassName("next")[i];
post.style.height = "200px"; // Si la hauteur > 200, on limite à 200px de hauteur
button.style.display = "block"; // Bouton "Lire la suite" visible
button.addEventListener("click", funct_show)
}
function funct_show(event) {
post.style.height = "100%";
this.style.display = "none"; // On enlève le bouton une fois le texte restant affiché
}
}
</script>
</body>
</html>Merci d'avance