How to make multiple read more buttons in same page using one jquery?

Question

I want to make multiple read more and read less button in same page using only one jquery . when i clicked the read more button ,it show some content and at the end of paragraph it shows read less button . I compled my 1st step . there are three readmore button in one page . One is working good but other two is not working .please give some suggestion .

$(document).ready(function() {
  $("#toggle").click(function() {
    var elem = $("#toggle").text();
    if (elem == "Read More") {
     
      $("#toggle").text("Read Less");
      $("#text").slideDown();
    } else {

      $("#toggle").text("Read More");
      $("#text").slideUp();
    }
  });
});

#text{
  display:none;
}






    
        Guide 
            
                
                    
                        
                             
                        
                        
                            Name
(Designation)
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.        
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.
Read More
                        
                    
                      
                        
                              Name
(Designation)
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.        
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.
Read More
                          
                        
                            
                        
                    

                    
                        
                             
                        
                        
                            Name
(Designation)
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.        
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.
Read More

user_5604852 · Answer

Problem

You are adding multiple elements with the same id, this is not appropriate and means that when you write your javascript there are errors. By using the id the code cannot tell the difference between different elements that are related - i.e. is expanding the wrong text. You are also not telling the code about the relationship between the clicked element and the element to be shown/hidden.

Solution

Use classes for each of your elements - i.e. toggle-text-button for the links that triger the showing or hiding of elements with the class .toggle-text.

I have used the following code to move from the Read More to the appropriate elements:

$(this).parent().children(".toggle-text").slideDown();

Code explaination:

$(this) jquery notation, telling the code to start with the element currently in focus (i.e. the one clicked)
.parent() move up the DOM tree one element (an alternative would be .closest() that continues to move up until the selector condition is met)
.children(".toggle-text") find all children of the current element (as we have moved up the DOM tree this is the parent of the clicked element), that match the selector
.slideDown() slide down any elements that match the previous series of selectors

Demo

// Add click event dynamically
$(document).on("click", ".toggle-text-button", function() {

  // Check if text is more or less
  if ($(this).text() == "Read More") {

    // Change link text
    $(this).text("Read Less");
    
    // Travel up DOM tree to parent, then find any children with CLASS .toggle-text and slide down
    $(this).parent().children(".toggle-text").slideDown();
    
  } else {


    // Change link text
    $(this).text("Read More");
    
    // Travel up DOM tree to parent, then find any children with CLASS .toggle-text and slide up 
    $(this).parent().children(".toggle-text").slideUp();
    
  }
  
});

.toggle-text {
  display: none;
}






  
    Guide
    
      
        
          
            
          
          
            Name
            (Designation)
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum
              voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.
Read More
          
        
        
        
            
          
          
            Name
            (Designation)
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum
              voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.
Read More
          
        
        
        
        
            
          
          
            Name
            (Designation)
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quae in nobis laborum laboriosam praesentium molestiae, aliquam maxime modi eos ab voluptatibus magnam, provident, dolorum, dolore adipisci! Qui dignissimos illum
              voluptate omnis similique repellendus. Quas quam assumenda aliquid quos expedita, sit dolorem eveniet omnis.
Read More

Alternative Demo

You can simplify your javascript if you link the elements with attributes. See the basic demo below:

$(document).on("click", ".toggle-text-button", function() {


  if ($(this).text() == "Read More") {

    $(this).text("Read Less");
    
    // Use a jquery selector using the `.attr()` of the link
    $("#toggle-text-" + $(this).attr("toggle-text")).slideDown();

  } else {

    $(this).text("Read More");
    
    // Use a jquery selector using the `.attr()` of the link
    $("#toggle-text-" + $(this).attr("toggle-text")).slideUp();
  
  }

});

.toggle-text {
  display: none;
}



Text that cannot be hidden.
Text to show and hide.
Read More

user_1174849 · Answer

I hope I'm not too late for this. There is simple solution without jQuery. Just use toggle from UIKIT.


    Lorem ipsum...
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, tempora! Odio quibusdam odit vitae magni dolore. Praesentium officiis vel eos dicta expedita a delectus amet laborum voluptate? Veritatis, pariatur sed.
    
      Read More ...
      Read Less ...

user_4939915 · Answer

$(document).ready(function() {
  $("#toggle").click(function() {
    var elem = $(this).text();
    if (elem == "Read More") {

      $(this).text("Read Less");
      $("#text").slideDown();
    } else {

      $(this).text("Read More");
      $("#text").slideUp();
    }
  });

});

How to make multiple read more buttons in same page using one jquery?

3 Answers

Problem

Solution

Demo

Alternative Demo