Menu
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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-section uk-section-small uk-section-default">
<div class="uk-container">
<h2 class="heading-primary uk-text-center "><span>Guide</span></h2>
<div class="uk-grid-divider uk-child-width-expand uk-margin-medium-top uk-margin-mediumm-bottom" uk-grid>
<div>
<div class="uk-text-left" uk-grid>
<div class="uk-width-1-4@s uk-text-center">
<img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
</div>
<div class="uk-width-3-4@s">
<h1 style="display: inline">Name</h1><h2 style="display: inline; font-style: italic;">(Designation)</h2>
<p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
<p class="uk-text-justify" id="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><a id="toggle">Read More</a>
</div>
</div>
<div class="uk-text-left" uk-grid>
<div class="uk-width-3-4@s">
<h1 style="display: inline">Name</h1><h2 style="display: inline; font-style: italic;">(Designation)</h2>
<p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
<p class="uk-text-justify" id="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><a id="toggle">Read More</a>
</div>
<div class="uk-width-1-4@s">
<img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
</div>
</div>
<div class="uk-text-left" uk-grid>
<div class="uk-width-1-4@s uk-text-center">
<img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
</div>
<div class="uk-width-3-4@s">
<h1 style="display: inline">Name</h1><h2 style="display: inline; font-style: italic;">(Designation)</h2>
<p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
<p class="uk-text-justify" id="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><a id="toggle">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
698
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.
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// 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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet" />
<div class="uk-section uk-section-small uk-section-default">
<div class="uk-container">
<h2 class="heading-primary uk-text-center "><span>Guide</span></h2>
<div class="uk-grid-divider uk-child-width-expand uk-margin-medium-top uk-margin-mediumm-bottom" uk-grid>
<div>
<div class="uk-text-left" uk-grid>
<div class="uk-width-1-4@s uk-text-center">
<img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
</div>
<div class="uk-width-3-4@s">
<h1 style="display: inline">Name</h1>
<h2 style="display: inline; font-style: italic;">(Designation)</h2>
<p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
<p class="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><a class="toggle-text-button">Read More</a>
</div>
</div>
<div class="uk-width-1-4@s uk-text-center">
<img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
</div>
<div class="uk-width-3-4@s">
<h1 style="display: inline">Name</h1>
<h2 style="display: inline; font-style: italic;">(Designation)</h2>
<p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
<p class="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><a class="toggle-text-button">Read More</a>
</div>
</div>
<div class="uk-width-1-4@s uk-text-center">
<img class="uk-border-square" src="https://source.unsplash.com/200x200?face" alt="Border square">
</div>
<div class="uk-width-3-4@s">
<h1 style="display: inline">Name</h1>
<h2 style="display: inline; font-style: italic;">(Designation)</h2>
<p class="uk-text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque officia optio nostrum voluptas, rem error nulla sed illo eveniet quasi.</p>
<p class="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><a class="toggle-text-button">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Text that cannot be hidden.</p>
<p class="toggle-text" id="toggle-text-1">Text to show and hide.</p>
<a class="toggle-text-button" toggle-text="1">Read More</a>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
