如何添加阅读更多/阅读更少按钮？

Question

I used the following grid card template from CodePen

There is already a read more button added in the card, but it doesnt function properly, as when I click the button nothing happens, like there is no code given to it. What I want is when I click the button, I want rest of the text to appear and accoridngly, it should say read less button when you click read more . How would I make that work? I tried searching it up on google but this example seems too complex to implement the way I know/learned.

Code:

 @import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800); figure.snip1311 { font-family: 'Raleway', Arial, sans-serif; position: relative; float: left; overflow: hidden; margin: 10px 1%; min-width: 230px; max-width: 315px; max-height: 220px; width: 100%; color: #ffffff; text-align: left; background-color: #07090c; font-size: 16px; -webkit-perspective: 50em; perspective: 50em; } figure.snip1311 * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.6s ease; transition: all 0.6s ease; } figure.snip1311 img { max-width: 100%; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; backface-visibility: hidden; } figure.snip1311 figcaption { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: rotateX(90deg) translate(0%, -50%); transform: rotateX(90deg) translate(0%, -50%); -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; transform-origin: 0% 0%; z-index: 1; opacity: 0; padding: 0 30px; } figure.snip1311 h3, figure.snip1311 p { line-height: 1.5em; } figure.snip1311 h3 { margin: 0; font-weight: 800; text-transform: uppercase; } figure.snip1311 p { font-size: 0.8em; font-weight: 500; margin: 0 0 15px; } figure.snip1311.read-more { border: 2px solid #ffffff; padding: 0.5em 1em; font-size: 0.8em; text-decoration: none; color: #ffffff; display: inline-block; } figure.snip1311.read-more:hover { background-color: #ffffff; color: #000000; } figure.snip1311:hover img, figure.snip1311.hover img { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); opacity: 0; -webkit-transition-delay: 0; transition-delay: 0; } figure.snip1311:hover figcaption, figure.snip1311.hover figcaption { -webkit-transform: rotateX(0deg) translate(0, -50%); transform: rotateX(0deg) translate(0, -50%); opacity: 1; -webkit-transition-delay: 0.35s; transition-delay: 0.35s; } /* Demo purposes only */ body { background-color: #212121; }

 <link rel="stylesheet" href="assets/css/projects.css"> <section id="project"> <link rel="stylesheet" href="assets/css/project.css"> <div class="section-title"> <h2>My Projects</h2> </div> <figure class="snip1311"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample94.jpg" alt="sample94"/> <figcaption> <h3>Norman Gordon</h3> <p>I think nighttime is dark so you can imagine your fears with less distraction.</p><a href="#" class="read-more">Read More</a> </figcaption> </figure> <figure class="snip1311"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample98.jpg" alt="sample98"/> <figcaption> <h3>Jason Response</h3> <p>If we wanted more leisure, we'd invent machines that do things less efficiently.</p><a href="#" class="read-more">Read More</a> </figcaption> </figure> <figure class="snip1311"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample98.jpg" alt="sample98"/> <figcaption> <h3>Jason Response</h3> <p>If we wanted more leisure, we'd invent machines that do things less efficiently.</p><a href="#" class="read-more">Read More</a> </figcaption> </figure> </section>

When I click Read More, I want rest of the text to appear but how would I accomplish that task? Please help, I tried various methods such as what W3 schools suggested which was to add JS, and then do #more (display: none)...etc but I cant still get it to work properly

Answer 1

Add the content you want to hide under all the read more buttons in the html Then set them to display: none;

Now read through this snippet to understand

---

 // Select all the read more buttons and hidden contents const readMoreButtons = document.querySelectorAll(".read-more"); const hiddenContents = document.querySelectorAll(".hidden"); // Now loop over the read more buttons readMoreButtons.forEach( (readMoreButton, index) => { // Add onclick event listeners to all of them readMoreButton.addEventListener("click", () => { // Change content of read more button to read less based on the textContent if(readMoreButton.textContent === "Read More") { readMoreButton.textContent = "Read Less"; } else { readMoreButton.textContent = "Read More"; } // Toggle class based on index hiddenContents[index].classList.toggle("hidden"); }) })

 .hidden{ display:none; }.read-more{ cursor:pointer; }

 <p>Hey it's me content</p> <div class="read-more">Read More</div> <p class="hidden">More Content I need to be shown please</p> <p>Hey it's me content</p> <div class="read-more">Read More</div> <p class="hidden">More Content I need to be shown please </p>