I would use ChatGPT to generate some custom JS for this.
I have a long paragraph that I want to split into two using a read more link that when it is clicked, reveal the rest of the paragraph.
Write this using vanilla javascript, css and htmlthe reason I don't just generate the code for you is 1) it would need some setup, which would take some time and 2) I like to teach people how to fish, instead of catching their fish for them. 馃槈 Let me know how you go with this!
<style> a { cursor: pointer; } a:hover { text-decoration: underline; } </style> <div> <p> Google Ads (anciennement Google Adwords) est le premier canal d鈥檃cquisition digital pour g茅n茅rer du trafic qualifi茅. <span id="moreText" style="display: none; opacity: 0; transition: opacity 0.3s;"> En tant qu鈥檃gence Google Ads Partner, AdsBack combine expertise et une approche innovante des Ads pour vous cr茅er des campagnes publicitaires 脿 la pointe qui maximiseront votre retour sur investissement et vous assureront des performances optimales. </span> <span id="ellipsis">... </span> <a href="#" id="readMoreLink" onclick="toggleText()"> (voir plus)</a> </p> </div> <script> function toggleText() { var moreText = document.getElementById("moreText"); var readMoreLink = document.getElementById("readMoreLink"); var ellipsis = document.getElementById("ellipsis"); if (moreText.style.display === "none") { moreText.style.display = "inline"; setTimeout(function() { moreText.style.opacity = "1"; }, 10); ellipsis.style.display = "none"; // Cacher les ... readMoreLink.innerHTML = " (voir moins)"; } else { moreText.style.opacity = "0"; setTimeout(function() { moreText.style.display = "none"; }, 300); ellipsis.style.display = "inline"; // R茅afficher les ... readMoreLink.innerHTML = " (voir plus)"; } } </script>
result is good ! 馃槻

