How To Make Multiple Read More Buttons In Same Page Using One Jquery?

February 28, 2024 Post a Comment

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

Solution 1:

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 <a class="toggle-text-button">Read More</a> 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 lessif ($(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;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css"rel="stylesheet" /><divclass="uk-section uk-section-small uk-section-default"><divclass="uk-container"><h2class="heading-primary uk-text-center "><span>Guide</span></h2><divclass="uk-grid-divider uk-child-width-expand  uk-margin-medium-top uk-margin-mediumm-bottom"uk-grid><div><divclass="uk-text-left"uk-grid><divclass="uk-width-1-4@s uk-text-center"><imgclass="uk-border-square"src="https://source.unsplash.com/200x200?face"alt="Border square"></div><divclass="uk-width-3-4@s"><h1style="display: inline">Name</h1><h2style="display: inline;  font-style: italic;">(Designation)</h2><pclass="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p><pclass="uk-text-justify toggle-text">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.</p><aclass="toggle-text-button">Read More</a></div></div><divclass="uk-width-1-4@s uk-text-center"><imgclass="uk-border-square"src="https://source.unsplash.com/200x200?face"alt="Border square"></div><divclass="uk-width-3-4@s"><h1style="display: inline">Name</h1><h2style="display: inline;  font-style: italic;">(Designation)</h2><pclass="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p><pclass="uk-text-justify toggle-text">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.</p><aclass="toggle-text-button">Read More</a></div></div><divclass="uk-width-1-4@s uk-text-center"><imgclass="uk-border-square"src="https://source.unsplash.com/200x200?face"alt="Border square"></div><divclass="uk-width-3-4@s"><h1style="display: inline">Name</h1><h2style="display: inline;  font-style: italic;">(Designation)</h2><pclass="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p><pclass="uk-text-justify toggle-text">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.</p><aclass="toggle-text-button">Read More</a></div></div></div></div></div></div>

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

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><p>Text that cannot be hidden.</p><pclass="toggle-text"id="toggle-text-1">Text to show and hide.</p><aclass="toggle-text-button"toggle-text="1">Read More</a>

Solution 2:

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

<sectionclass="uk-margin-small-top"><p>Lorem ipsum...</p><pid="toggle-click"class="uk-padding"hidden>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.</p><aclass="uk-link"type="button"uk-toggle="target: #toggle-click; animation: uk-animation-fade; mode: click"aria-expanded="false"><spanid="toggle-click">Read More ...</span><spanid="toggle-click"hidden>Read Less ...</span></a></section>

Solution 3:

$(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();
    }
  });

});

Learn Html5