jQuery: hide/ show + change text clicking the same class

jQuery: hide/ show + change text clicking the same class

I have a group of words that on click should show and hide elements. In
addition, I need to change that first group of words. So if it gets
clicked, it shows the container with content + gets changed to hide. In
alternative, when it is clicked again, it should hide the content and
become 'show' again.
<div class="hide-show-button">Click Here to <span
id="hide-show-changed">Show</span></div>
<div class="hide-show">
.... content
</div>
<script>
$('.hide-show').hide();
$('.hide-show-button').click(function(){
$('.hide-show').show();
$('#hide-show-changed').text('Hide');
}, function() {
$('.hide-show').hide();
$('#hide-show-changed').text('Show');
});
</script>
Thanks