How to make multiple read more buttons in same page using one jquery?
0
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>javascript jquery html css uikit
edited Dec 29 '18 at 16:04
Ameena sana
152
asked Dec 28 '18 at 7:50
kajolkajol
269
add a comment |
0
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>javascript jquery html css uikit
edited Dec 29 '18 at 16:04
Ameena sana
152
asked Dec 28 '18 at 7:50
kajolkajol
269
1
You shouldn't have multiple elements with the sameid
– gbandres
Dec 28 '18 at 7:58
ok i got it .thank u for ur reply and your time.
– kajol
Dec 30 '18 at 8:23
add a comment |
0
0
0
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>javascript jquery html css uikit
edited Dec 29 '18 at 16:04
Ameena sana
152
asked Dec 28 '18 at 7:50
kajolkajol
269
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>$(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>$(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>javascript jquery html css uikit
javascript jquery html css uikit
edited Dec 29 '18 at 16:04
Ameena sana
152
asked Dec 28 '18 at 7:50
kajolkajol
269
edited Dec 29 '18 at 16:04
Ameena sana
152
asked Dec 28 '18 at 7:50
kajolkajol
269
edited Dec 29 '18 at 16:04
Ameena sana
152
edited Dec 29 '18 at 16:04
Ameena sana
152
edited Dec 29 '18 at 16:04
Ameena sana
152
152
asked Dec 28 '18 at 7:50
kajolkajol
269
asked Dec 28 '18 at 7:50
kajolkajol
269
asked Dec 28 '18 at 7:50
kajolkajol
269
269
1
You shouldn't have multiple elements with the sameid
– gbandres
Dec 28 '18 at 7:58
ok i got it .thank u for ur reply and your time.
– kajol
Dec 30 '18 at 8:23
add a comment |
1
You shouldn't have multiple elements with the sameid
– gbandres
Dec 28 '18 at 7:58
ok i got it .thank u for ur reply and your time.
– kajol
Dec 30 '18 at 8:23
1
1
You shouldn't have multiple elements with the same
id– gbandres
Dec 28 '18 at 7:58
You shouldn't have multiple elements with the same
id– gbandres
Dec 28 '18 at 7:58
ok i got it .thank u for ur reply and your time.
– kajol
Dec 30 '18 at 8:23
ok i got it .thank u for ur reply and your time.
– kajol
Dec 30 '18 at 8:23
add a comment |
2 Answers
2
active
oldest
votes
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 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>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;
}<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>answered Dec 28 '18 at 8:09
Oliver TrampleasureOliver Trampleasure
1,5431519
Thanks it really helpful and your explaination is nice. @Oliver Trampleasure
– kajol
Dec 30 '18 at 8:30
add a comment |
-2
$(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();
}
});
});
edited Dec 28 '18 at 16:32
meagar♦
177k29272288
answered Dec 28 '18 at 7:57
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
2
all your answers are pls try ? you can probably add more description
– Temani Afif
Dec 28 '18 at 8:38
3
Please stop posting "pls try jquery" in your answers. You should be adding a useful description of what your code does and why it solves the problem, chat-speak like "plz" is not appropriate for Stack Overflow.
– meagar♦
Dec 28 '18 at 16:32
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53955285%2fhow-to-make-multiple-read-more-buttons-in-same-page-using-one-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 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>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;
}<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>answered Dec 28 '18 at 8:09
Oliver TrampleasureOliver Trampleasure
1,5431519
Thanks it really helpful and your explaination is nice. @Oliver Trampleasure
– kajol
Dec 30 '18 at 8:30
add a comment |
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 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>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;
}<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>answered Dec 28 '18 at 8:09
Oliver TrampleasureOliver Trampleasure
1,5431519
Thanks it really helpful and your explaination is nice. @Oliver Trampleasure
– kajol
Dec 30 '18 at 8:30
add a comment |
1
1
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 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>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;
}<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>answered Dec 28 '18 at 8:09
Oliver TrampleasureOliver Trampleasure
1,5431519
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 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>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;
}<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>// 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>// 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>$(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>$(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>answered Dec 28 '18 at 8:09
Oliver TrampleasureOliver Trampleasure
1,5431519
edited Dec 28 '18 at 8:24
answered Dec 28 '18 at 8:09
Oliver TrampleasureOliver Trampleasure
1,5431519
answered Dec 28 '18 at 8:09
Oliver TrampleasureOliver Trampleasure
1,5431519
answered Dec 28 '18 at 8:09
Oliver TrampleasureOliver Trampleasure
1,5431519
1,5431519
Thanks it really helpful and your explaination is nice. @Oliver Trampleasure
– kajol
Dec 30 '18 at 8:30
add a comment |
Thanks it really helpful and your explaination is nice. @Oliver Trampleasure
– kajol
Dec 30 '18 at 8:30
Thanks it really helpful and your explaination is nice. @Oliver Trampleasure
– kajol
Dec 30 '18 at 8:30
Thanks it really helpful and your explaination is nice. @Oliver Trampleasure
– kajol
Dec 30 '18 at 8:30
add a comment |
-2
$(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();
}
});
});
edited Dec 28 '18 at 16:32
meagar♦
177k29272288
answered Dec 28 '18 at 7:57
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
2
all your answers are pls try ? you can probably add more description
– Temani Afif
Dec 28 '18 at 8:38
3
Please stop posting "pls try jquery" in your answers. You should be adding a useful description of what your code does and why it solves the problem, chat-speak like "plz" is not appropriate for Stack Overflow.
– meagar♦
Dec 28 '18 at 16:32
add a comment |
-2
$(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();
}
});
});
edited Dec 28 '18 at 16:32
meagar♦
177k29272288
answered Dec 28 '18 at 7:57
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
2
all your answers are pls try ? you can probably add more description
– Temani Afif
Dec 28 '18 at 8:38
3
Please stop posting "pls try jquery" in your answers. You should be adding a useful description of what your code does and why it solves the problem, chat-speak like "plz" is not appropriate for Stack Overflow.
– meagar♦
Dec 28 '18 at 16:32
add a comment |
-2
-2
-2
$(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();
}
});
});
edited Dec 28 '18 at 16:32
meagar♦
177k29272288
answered Dec 28 '18 at 7:57
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
$(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();
}
});
});
edited Dec 28 '18 at 16:32
meagar♦
177k29272288
answered Dec 28 '18 at 7:57
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
edited Dec 28 '18 at 16:32
meagar♦
177k29272288
edited Dec 28 '18 at 16:32
meagar♦
177k29272288
edited Dec 28 '18 at 16:32
meagar♦
177k29272288
177k29272288
answered Dec 28 '18 at 7:57
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
answered Dec 28 '18 at 7:57
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
answered Dec 28 '18 at 7:57
AddWeb Solution Pvt LtdAddWeb Solution Pvt Ltd
12.6k1936
12.6k1936
2
all your answers are pls try ? you can probably add more description
– Temani Afif
Dec 28 '18 at 8:38
3
Please stop posting "pls try jquery" in your answers. You should be adding a useful description of what your code does and why it solves the problem, chat-speak like "plz" is not appropriate for Stack Overflow.
– meagar♦
Dec 28 '18 at 16:32
add a comment |
2
all your answers are pls try ? you can probably add more description
– Temani Afif
Dec 28 '18 at 8:38
3
Please stop posting "pls try jquery" in your answers. You should be adding a useful description of what your code does and why it solves the problem, chat-speak like "plz" is not appropriate for Stack Overflow.
– meagar♦
Dec 28 '18 at 16:32
2
2
all your answers are pls try ? you can probably add more description
– Temani Afif
Dec 28 '18 at 8:38
all your answers are pls try ? you can probably add more description
– Temani Afif
Dec 28 '18 at 8:38
3
3
Please stop posting "pls try jquery" in your answers. You should be adding a useful description of what your code does and why it solves the problem, chat-speak like "plz" is not appropriate for Stack Overflow.
– meagar♦
Dec 28 '18 at 16:32
Please stop posting "pls try jquery" in your answers. You should be adding a useful description of what your code does and why it solves the problem, chat-speak like "plz" is not appropriate for Stack Overflow.
– meagar♦
Dec 28 '18 at 16:32
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53955285%2fhow-to-make-multiple-read-more-buttons-in-same-page-using-one-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
You shouldn't have multiple elements with the same
id– gbandres
Dec 28 '18 at 7:58
ok i got it .thank u for ur reply and your time.
– kajol
Dec 30 '18 at 8:23