CODEWITHSUNDEEP
javascriptjqueryhtml
lucafj2j282j
lucafj2j282j

Reputation: 891

How do I change my button text onclick?

I have a jQuery slideToggle that I am using to display and hide certain content. It always show an arrow pointing down, but if clicked and the text is shown, the arrow should be pointing up. Anyway to do this?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").slideToggle();
        });
    });
</script>


<button>&#8595;</button>
<p>Wow!</p>

</body>
</html>

Upvotes: 9

Views: 3338

Answers (8)

Yuri P.
Yuri P.

Reputation: 197

A suggestion based on @Jorrex's answer above.

You can also use e.g. button's class instead of a variable:

$("button").click(function() {
  if (!$(this).hasClass('toggled')) {
    $(this).html("&#8593;");
  } else {
    $(this).html("&#8595;");
  }
  $(this).toggleClass('toggled');
  $("p").slideToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  &#8595;
</button>
<p>
  Wow!
</p>

This way it would be much easier if one needs more than one such button on the same page.

Edit: Even if you don't plan to use more than one such button on a page, it's still safer not to use a variable here, because any other function inside $(document).ready(function(){ could possibly interfere with that variable -- and make you waste your time trying to figure out why "that strange things" (see this example) are happening. (While the error may seem obvious in that example, such errors become much harder to spot when your codebase grows.)

Upvotes: 0

Martijn
Martijn

Reputation: 16103

My answer is based on Jorrex's answer. I'm a fan of making code short and readable. Simple logic should be simple code. IMO this next example is easier to read, especially if you have lots of code in your file.

Also, you can just as easily use plain Javascript for this, making it more lightweight.

var toggled = false;
$("button").click(function() {
    this.innerHTML = !toggled ? "&#8593;" : "&#8595;";

    toggled = !toggled; // flip the value
    $("p").slideToggle();
});

Upvotes: 0

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

Try this it will work :

change the html content of button on slideToggle().

Html :

<button id="up">&#8593;</button>
<p>Wow!</p>

JQuery :

$(document).ready(function(){
    $("button").click(function(){
   var arrowId = $(this).attr('id');
   if (arrowId == 'up') {
     $("button").html('&#8595');
     $(this).attr('id','down');
     } else {
     $("button").html('&#8593');
     $(this).attr('id','up');
     }
        $("p").slideToggle();
    });
});

Demo : https://jsfiddle.net/64a6fafh/1/

Upvotes: 1

Jorrex
Jorrex

Reputation: 1500

As simple as that!

var toggled = false;
$("button").click(function() {
  if (!toggled) {
    $(this).html("&#8593;");
    toggled = true;
  } else {
    $(this).html("&#8595;");
    toggled = false;
  }

  $("p").slideToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  &#8595;
</button>
<p>
  Wow!
</p>

Upvotes: 6

Manjeet Barnala
Manjeet Barnala

Reputation: 2995

Use $("button").text('Button Clicked'); to change the text of your button onclick

$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
    $("button").text('Button Clicked');
  });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<button>&#8595;</button>
<p>Wow!</p>

</body>
</html>

Upvotes: 1

Rino Raj
Rino Raj

Reputation: 6264

Working Demo 

$(document).ready(function() {
  $("button").click(function() {
    $("p").slideToggle();
    $(this).toggleClass('down up');

  });
});
.down {
  background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png");
  height: 130px;
  width: 130px;
}
.up {
  background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-128.png");
  height: 130px;
  width: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="down"></button>
<p>Wow!</p>

Upvotes: 3

Unamata Sanatarai
Unamata Sanatarai

Reputation: 6637

This solutions checks if the button has an arrow pointing 'UP', if it does, replaces it with 'DOWN', and vice versa.

    $(document).ready(function(){
        $("button").click(function(){
            if ($(this).text() == 'up'){
                $(this).html('&#8595;')
            }else{
                $(this).html('up');
            }
            $("p").slideToggle();
        });
    });

https://jsfiddle.net/gogaa33d/

Upvotes: 2

Oscar K
Oscar K

Reputation: 76

Try something like this.. :)

$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle();
        $( this ).text('NewButtonText');
    });
});

Upvotes: 2

Related Questions