"Implement a 'Show More/Show Less' Button Functionality for Various Content Using

Question

"Implement a 'Show More/Show Less' Button Functionality for Various Content Using

I'm having trouble implementing a JavaScript solution that adds read more/less buttons to my testimonials. The issue is that it only seems to work for one button and not multiple as I had hoped. Is there a way to modify this code so that it can be used for multiple buttons instead of just one?

function adjustReadMore() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}

#more {display: none;}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>Expand & Collapse Testimonials</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="adjustReadMore()" id="myBtn">Read more</button>

<h2>Expand & Collapse Testimonials</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="adjustReadMore()" id="myBtn">Read more</button>

</body>
</html>

javascript html css

Answer 1

Answer №1

It's important to note that IDs must be unique and one-of-a-kind in HTML. If you have multiple elements with the same ID, only the first one will work. Instead, consider using classes and learn how to target elements with event.target in JavaScript for easier manipulation.

  var dots = event.target.previousElementSibling.querySelector(".dots");
  var moreText = event.target.previousElementSibling.querySelector(".more");
  var btnText = event.target;

For more information on targeting elements with events, please refer to this link.

Once you capture the clicked button as an element with the event, you can navigate to other elements by using methods like previousSibling to access the previous paragraph tag and then use querySelector to select the desired class inside it.

function myFunction(event) {
  var dots = event.target.previousElementSibling.querySelector(".dots");
  var moreText = event.target.previousElementSibling.querySelector(".more");
  var btnText = event.target;

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

.more {
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>



  <h2>Read More Read Less Button</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
  <button onclick="myFunction(event)" class="myBtn">Read more</button>



  <h2>Read More Read Less Button</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
  <button onclick="myFunction(event)" class="myBtn">Read more</button>

</body>

</html>

Answer 2

It's important to note that IDs must be unique and one-of-a-kind in HTML. If you have multiple elements with the same ID, only the first one will work. Instead, consider using classes and learn how to target elements with event.target in JavaScript for easier manipulation.

  var dots = event.target.previousElementSibling.querySelector(".dots");
  var moreText = event.target.previousElementSibling.querySelector(".more");
  var btnText = event.target;

For more information on targeting elements with events, please refer to this link.

Once you capture the clicked button as an element with the event, you can navigate to other elements by using methods like previousSibling to access the previous paragraph tag and then use querySelector to select the desired class inside it.

function myFunction(event) {
  var dots = event.target.previousElementSibling.querySelector(".dots");
  var moreText = event.target.previousElementSibling.querySelector(".more");
  var btnText = event.target;

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

.more {
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>



  <h2>Read More Read Less Button</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
  <button onclick="myFunction(event)" class="myBtn">Read more</button>



  <h2>Read More Read Less Button</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
  <button onclick="myFunction(event)" class="myBtn">Read more</button>

</body>

</html>

Answer 3

Answer №2

To implement this functionality using VanillaJS, you can utilize the following code snippet:

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll(".lessButton").forEach(element => {
    element.onclick = () => {
        //Add your custom action here   
    }
  });
  
  document.querySelectorAll(".moreButton").forEach(element => {
    element.onclick = () => {
          //Add your custom action here   
    }
  });

});

You have the ability to access attributes like ID and any additional data properties assigned to each button element.

Answer 4

To implement this functionality using VanillaJS, you can utilize the following code snippet:

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll(".lessButton").forEach(element => {
    element.onclick = () => {
        //Add your custom action here   
    }
  });
  
  document.querySelectorAll(".moreButton").forEach(element => {
    element.onclick = () => {
          //Add your custom action here   
    }
  });

});

You have the ability to access attributes like ID and any additional data properties assigned to each button element.

"Implement a 'Show More/Show Less' Button Functionality for Various Content Using

Answer №1

Answer №2

Similar questions

Can you explain the slow parameter feature in Mocha?

File is having trouble uploading, could it be related to buffering?

Loading a Threejs model: "The CORS policy has blocked access to XMLHttpRequest from origin 'null' - How can I test this locally? Or should I simply upload it?"

What is the best way to manage data that arrives late from a service?

Avoiding Page Reloads with Ajax while Removing Entries from a Table in Laravel

"Provide information, then open a new webpage by clicking on a button. Perform various actions with the form by using type

What is the best method for establishing environment variables across different platforms?

pm2 doesn't play well with node dotenv

Using the event object in the onClick handler within React applications

React - Page Loads with Empty Query Parameters

Next.js: An absence of response is observed when a high volume of requests is made on a server-side rendering page with

Deactivate the unclicked button using Vue.JS

utilizing angularjs and bootstrap to manage multiple button models

Securely Saving JWT Tokens from Auth0 Login in Node.js Express

Guide to retrieving the animation from a VRML file with three.js technology

Adding JSON data to a MySQL column in JSON format with the help of NodeJS

Bootstrap 5 - Achieve automatic column width within a row

Navigating through an array in jquery that has been populated by a php script

Obtaining a date and time in PHP from a JavaScript array

I'm experiencing a strange issue where the timezone offset is being doubled on my computer, yet it is functioning correctly on the UTC