How to change the title after clicking on a div

Question

$('.showlink').click( function() {
    $('.box').slideToggle(300);
});

.box {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showlink">click</div>
<div class="box">content</div>

I have my code like this and I want to change the word 'click' into 'click again' that's in the first div after clicking on it, but I don't know how to achieve this?

score 2 · Accepted Answer · answered Apr 10 '16 at 09:13

Use text() method like following to change text.

$('.showlink').click( function() {
    var text = $(this).text().trim();
    $(this).text(text == 'click' ? 'click again' : 'click');
    $('.box').slideToggle(300);
});

.box {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="showlink">click</div>

<div class="box">content</div>

score 1 · Answer 2 · edited May 23 '17 at 11:45

You can use the .text method of jQuery

 $('.showlink').click(function() {
   $(this).text("Click again");
   $('.box').slideToggle(300);
 });

.box {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="showlink">click</div>

<div class="box">content</div>

But you can get a bit speed/performance by modifying a bit your JS code. Here you use jQuery to select your DOM nodes each time you click. Since DOM access is really slow you can save the reference into a variable

(function() {
  "use strict";

  var $showLink = $('.showlink');
  var $box = $('.box');
  $showLink.click(function() {
    $showLink.text("Click again");
    $box.slideToggle(300);
  });

})();

 .box {
   display: none;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="showlink">click</div>

<div class="box">content</div>

score 1 · Answer 3 · answered Apr 10 '16 at 09:37

Azim's answer sums it up. But since some new developers don't understand how ternary operations work, you can achieve it with the old fashioned if else statement as well.

HTML:

<div class="showlink">click</div>
<div class="box">content</div>

jQuery:

$(".box").hide();
$(".showlink").click(function(){
    $(".box").toggle();
  if($(".showlink").click){
    $(".showlink").text("click again");
  } if ($(".box").css("display") == "none") {
    $(".showlink").text("click");
  }
});

Working demo

How to change the title after clicking on a div

3 Answers3