CODEWITHSUNDEEP
jquery
Slasher
Slasher

Reputation: 618

(jQuery) Change text on click

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/

Upvotes: 1

Views: 347

Answers (4)

Agam Banga
Agam Banga

Reputation: 2693

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');
         }
     });
  });

Upvotes: 2

Paul Roub
Paul Roub

Reputation: 36438

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>

Upvotes: 2

Beri
Beri

Reputation: 11600

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');
   }
  }

Upvotes: 0

user5986440
user5986440

Reputation:

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");
        }

    });

});

Upvotes: 0

Related Questions