my problem on this read more button is, that when I close it by click on the #test_001 or #test_002 the read more button stays on: "read less" how do I change this ?
$("#readmore_01").click(function(e){
e.preventDefault();
$("#test_001").toggle("fast");
window.scrollTo(170, 170);
let name = $(this).html();
$(this).html("Read less");
if(name == "Read less"){
$(this).html("Read more");
}
});
$("#readmore_02").click(function(e){
e.preventDefault();
$("#test_002").toggle("fast");
window.scrollTo(550, 550);
let name = $(this).html();
$(this).html("Read less");
if(name == "Read less"){
$(this).html("Read more");
}
});
$("#test_001").click(function(e){
e.preventDefault();
$("#test_001").toggle("fast");
window.scrollTo(170, 170);
});
$("#test_002").click(function(e){
e.preventDefault();
$("#test_002").toggle("fast");
window.scrollTo(550, 550);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content_01">
<div>Hi guys that's a test</div>
<p id="test_001" style="display:none">Test</p>
<div class="toggleBtn_01">
<i class="fa fa-plus" id="readmore_01">Read more</i>
</div>
</div>
<div class="content_02">
<div>Hi guys that's a test</div>
<p id="test_002" style="display:none">Test</p>
<div class="toggleBtn_02">
<i class="fa fa-plus" id="readmore_02">Read more</i>
</div>
</div>These functions can be abstracted a bit so you only need to have a single function to toggle this behavior.
First, we can define Read more and Read less as constants for better reusability (i.e. less error-prone to typos, and if you need to update the text, you only need to update this const value instead of updating a string value in multiple functions).
const READ_MORE = 'Read more';
const READ_LESS = 'Read less';
Then we can add this click handler to the p and the div.toggleBtn_0x so clicking on any of them will run this function.
.content_01 p,
.content_01 div.toggleBtn_01,
.content_02 p,
.content_02 div.toggleBtn_02
Once we're in the function, we can get the i and p elements to toggle by going to the parent, and then finding the relevant nodes.
let button = $(this).parent().find('i');
let text = $(this).parent().find('p');
I left out the scrollTo functionality because it wasn't clear how it was working in this snippet (probably because the example text is very short), but it should be fairly straight-forward to implement again as described at Scroll to an element with jQuery.
Full example:
const READ_MORE = 'Read more';
const READ_LESS = 'Read less';
$('.content_01 p, .content_01 div.toggleBtn_01, .content_02 p, .content_02 div.toggleBtn_02').on('click', function(e) {
e.preventDefault();
let button = $(this).parent().find('i');
let text = $(this).parent().find('p');
text.toggle('fast');
if (button.html() == READ_LESS) {
button.html(READ_MORE);
} else {
button.html(READ_LESS);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content_01">
<div>Hi guys that's a test</div>
<p id="test_001" style="display:none">Test</p>
<div class="toggleBtn_01">
<i class="fa fa-plus" id="readmore_01">Read more</i>
</div>
</div>
<div class="content_02">
<div>Hi guys that's a test</div>
<p id="test_002" style="display:none">Test</p>
<div class="toggleBtn_02">
<i class="fa fa-plus" id="readmore_02">Read more</i>
</div>
</div>Your problem is in your test_00# function calls.
When you click on the Test text, it calls the test_00# functions which have no logic to update the Read more/less buttons.
Add the following line in your test_00# functions to update when clicking the "Test" text.
document.getElementById("readmore_01").innerHTML = "Read more"
$("#readmore_01").click(function(e){
e.preventDefault();
$("#test_001").toggle("fast");
window.scrollTo(170, 170);
let name = $(this).html();
$(this).html("Read less");
if(name == "Read less"){
$(this).html("Read more");
}
});
$("#readmore_02").click(function(e){
e.preventDefault();
$("#test_002").toggle("fast");
window.scrollTo(550, 550);
let name = $(this).html();
$(this).html("Read less");
if(name == "Read less"){
$(this).html("Read more");
}
});
$("#test_001").click(function(e){
e.preventDefault();
$("#test_001").toggle("fast");
window.scrollTo(170, 170);
document.getElementById("readmore_01").innerHTML = "Read more"
});
$("#test_002").click(function(e){
e.preventDefault();
$("#test_002").toggle("fast");
window.scrollTo(550, 550);
document.getElementById("readmore_02").innerHTML = "Read more"
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="content_01">
<div>Hi guys that's a test</div>
<p id="test_001" style="display:none">Test</p>
<div class="toggleBtn_01">
<i class="fa fa-plus" id="readmore_01">Read more</i>
</div>
</div>
<div class="content_02">
<div>Hi guys that's a test</div>
<p id="test_002" style="display:none">Test</p>
<div class="toggleBtn_02">
<i class="fa fa-plus" id="readmore_02">Read more</i>
</div>
</div>