CODEWITHSUNDEEP
javascripthtml
Nono111
Nono111

Reputation: 21

Change HTML on click

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>

Upvotes: 1

Views: 98

Answers (2)

MFerguson
MFerguson

Reputation: 1747

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>

Upvotes: 1

WOUNDEDStevenJones
WOUNDEDStevenJones

Reputation: 5315

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>

Upvotes: 1

Related Questions