Ultra Awesome Site

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 html

the 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><br />a {<br /> cursor: pointer;<br />}<br /><br />a:hover {<br /> text-decoration: underline;<br />}<br /></style>

<div><br /> <p><br /> Google Ads (anciennement Google Adwords) est le premier canal d’acquisition digital pour générer du trafic qualifié.<br /> <span><br /> En tant qu’agence 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.<br /> </span><br /> <span>... </span><br /> <a href="#"> (voir plus)</a><br /> </p><br /></div>


<script><br /><br />function toggleText() {<br /> var moreText = document.getElementById("moreText");<br /> var readMoreLink = document.getElementById("readMoreLink");<br /> var ellipsis = document.getElementById("ellipsis");<br /><br /> if (moreText.style.display === "none") {<br /> moreText.style.display = "inline";<br /> setTimeout(function() {<br /> moreText.style.opacity = "1";<br /> }, 10);<br /> ellipsis.style.display = "none"; // Cacher les ...<br /> readMoreLink.innerHTML = " (voir moins)";<br /> } else {<br /> moreText.style.opacity = "0";<br /> setTimeout(function() {<br /> moreText.style.display = "none";<br /> }, 300);<br /> ellipsis.style.display = "inline"; // Réafficher les ...<br /> readMoreLink.innerHTML = " (voir plus)";<br /> }<br />}<br /><br /></script>