JQuery toggle div and change button text

Question

I have a working script that toggles my div, and it works great but I can't figure out how to also change the button text when clicked. I need the button text to be "Hide Spreads" when the spread div is shown, and "Show Spreads" when the spread div is not shown.

Script:

$(document).ready(function(){
  $(".spread").show();
  $(".show_hide").show();
  $('.show_hide').click(function(){
    $(".spread").toggle();
  });
});

Button:

<input type="button" class="show_hide" value="Hide Spreads" />

rrk · Accepted Answer · 2018-11-01 11:45:43Z

6

You can use $(this).val() to get value of the button and check it against the other possible value.

$('.show_hide').click(function(){
    $(".spread").toggle();
    $(this).val( $(this).val() == 'Hide Spreads' ? 'Show Spreads' : 'Hide Spreads' );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="button" class="show_hide" value="Hide Spreads">
<div class="spread">Test</div>

edited Nov 1, 2018 at 11:45

answered Aug 19, 2015 at 18:28

rrk

15.9k4 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mark Jones Over a year ago

Awesome, thank you. I was so close earlier, I was missing the .val(). Will accept as answer when allowed.

Sajjad Amin · Accepted Answer · 2019-08-30 18:20:34Z

3

you can use $(this).text() for get button text and change it by if else.

<button id="show_hide">Show</button>
<div id="display"></div>
<script>
$("#show_hide").click(function(){
    $("#display").toggle();
    if($(this).text() == "Show"){
       $(this).text("Hide");
    }else{
       $(this).text("Show");
    }
});
</script>

answered Aug 30, 2019 at 18:20

Sajjad Amin

312 bronze badges

Collectives™ on Stack Overflow

JQuery toggle div and change button text

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related