Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="./style.css">
- <title>Document</title>
- </head>
- <body>
- <style>
- a {
- color: blue;
- cursor: pointer;
- }
- </style>
- <div class="feed-item-body mt-10 m-width-20 post-body">
- <span class="short-text">Meu texto está ... <a class="read-more">ler mais</a></span>
- <span class="full-text" style="display: none">Meu texto está aqui firme e forte <a class="read-less">ler
- menos</a></span>
- </div>
- <div class="feed-item-body mt-10 m-width-20 post-body">
- <span class="short-text">Meu texto está ... <a class="read-more">ler mais</a> </span>
- <span class="full-text" style="display: none">Meu texto está aqui firme e forte <a class="read-less">ler
- menos</a></span>
- </div>
- <div class="feed-item-body mt-10 m-width-20 post-body">
- <span class="full-text">Meu texto pequeno</span>
- </div>
- <script>
- document.querySelectorAll(".post-body").forEach(function (el) {
- var fullText = el.querySelector(".full-text");
- var shortText = el.querySelector(".short-text");
- if (!shortText) return;
- el.querySelector(".read-more").addEventListener("click", function () {
- fullText.style.display = "";
- shortText.style.display = "none";
- });
- el.querySelector(".read-less").addEventListener("click", function () {
- fullText.style.display = "none";
- shortText.style.display = "";
- });
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement