(jQuery) Change text on click

Question

I'm trying to change text on click. First click "show", next click "hide". I can't figure out what is wrong here.

$(document).ready(function() { 
  $(".card-link:first").click(function() {
if ($(".card-link:first").text('Show comments')) { 
 $("ul.list-group.list-group-flush").show(); 
 $(".card-link:first").text('Hide comments');

} else if ($(".card-link:first").text('Hide comments')) {
 $("ul.list-group.list-group-flush").hide();
 $(".card-link:first").text('Show comments');
}
  });
});

JSfiddle: https://jsfiddle.net/eyc4kxzm/6/

if ($('.card-link:first').text('Show comments')) this is not how you test if an element contains a text — birdspider
– birdspider, Commented May 17, 2017 at 18:29
also, since you are usinge jsfiddle - please use at least the tidy button on top - for the code snipped here on SO — birdspider
– birdspider, Commented May 17, 2017 at 18:32

Paul Roub · Accepted Answer · 2017-05-17 18:35:22Z

text() just sets the text, it doesn't check the current value. You're setting "Show comments" every time, and text() is returning that value, so the if succeeds and its inner block is called.

Test what text() returns instead.

$(document).ready(function() { //Hide comments before first click
  $("ul.list-group.list-group-flush").hide();

  $(".card-link:first").click(function() {

    if ($(".card-link:first").text() === 'Show comments') {
      $("ul.list-group.list-group-flush").show();
      $(".card-link:first").text('Hide comments');
    } 
    else if ($(".card-link:first").text() === 'Hide comments') {
      $("ul.list-group.list-group-flush").hide();
      $(".card-link:first").text('Show comments');
    }
  });
});

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

<div class="container">
  <div class="card" style="width: 40em; margin: 0 auto;">

    <div class="card-block">
      <a href="#/" class="card-link">Show comments</a>

    </div>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">
        <div class="w-100">
          <h5>List group item heading</h5>
        </div>
        <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
      </li>
    </ul>
  </div>
</div>

Agam Banga · Accepted Answer · 2017-05-18 03:13:04Z

2

You are doing the wrong comparison of text. It returns the text if no value is passed inside the method & sets the text if there is value.

    $(document).ready(function() { //Hide comments before first click
         $("ul.list-group.list-group-flush").hide();
         $(".card-link:first").click(function() {
         if ($(".card-link:first").text() == 'Show comments') { 
            $("ul.list-group.list-group-flush").show(); 
            $(".card-link:first").text('Hide comments');
         } else if ($(".card-link:first").text() == 'Hide comments') {
            $("ul.list-group.list-group-flush").hide();
            $(".card-link:first").text('Show comments');
         }
     });
  });

edited May 18, 2017 at 3:13

answered May 17, 2017 at 18:29

Agam Banga

2,6931 gold badge14 silver badges18 bronze badges

1 Comment

Agam Banga Over a year ago

@julekgwa didn't notice that. let me update it. Thanks man. It was in OP as well :)

user5986440 · Accepted Answer · 2017-05-17 18:32:04Z

Since you're using jQuery already, you can use jQuery's onDocument load. Additionally it's generally cleaner to add/remove classes appose to checking if text is equal.

$(function() {

    $("ul.list-group.list-group-flush").hide();

        $(".card-link:first").click(function() {

        if ($(".card-link:first").hasClass("show-comments")) {
            $("ul.list-group.list-group-flush").hide();
            $(".card-link:first").text('Show comments');
            $(".card-link:first").removeClass("show-comments");
        } else {
            $("ul.list-group.list-group-flush").show(); 
            $(".card-link:first").text('Hide comments');
            $(".card-link:first").addClass("show-comments");
        }

    });

});

Beri · Accepted Answer · 2017-05-17 18:32:25Z

0

Try this, seems to be working fine:

  $(".card-link:first").click(function() {
    if ($(".card-link:first").text()==='Show comments') { 
      $("ul.list-group.list-group-flush").show(); 
      $(".card-link:first").text('Hide comments');
    } else  {
       $("ul.list-group.list-group-flush").hide();
       $(".card-link:first").text('Show comments');
   }
  }

answered May 17, 2017 at 18:32

Beri

11.6k4 gold badges38 silver badges59 bronze badges

Collectives™ on Stack Overflow

(jQuery) Change text on click

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related