Community forum for knowledge and support

Updated 7 months ago

Ultra Awesome Site

At a glance
The post contains a link to a website preview, and the comments discuss using ChatGPT to generate custom JavaScript code to split a long paragraph into two parts with a "read more" link. One community member provides the HTML, CSS, and JavaScript code to implement this functionality. Another community member mentions that they ran the prompt through ChatGPT and the results were good. There is no explicitly marked answer.
Useful resources
M
V
5 comments

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!

btw, I actually ran this prompt into ChatGPT and it generated some pretty decent results without testing the code.

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

result is good ! 😲

Add a reply
Sign up and join the conversation on Slack