JQuery toggle div и текст кнопки изменения

Question

У меня есть рабочий скрипт, который переключает мой div, и он отлично работает, но я не могу понять, как изменить текст кнопки при нажатии. Мне нужно, чтобы текст кнопки был «Hide Spreads», когда показан div div, и «Show Spreads», когда div div не отображается.

Сценарий:

$(document).ready(function(){ 

$(".spread").show(); 
$(".show_hide").show(); 

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

}); 

Кнопка:

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

Answer 1

$('.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>