How To Make Multiple Read More Buttons In Same Page Using One Jquery?
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();
}
});
});
Post a Comment for "How To Make Multiple Read More Buttons In Same Page Using One Jquery?"