Rename button buttons on click?

Question

JavaScript

$('.show_hidden').on('click',function() {
  $id = $(this).data('id');
  $('#'+$id).toggle();
});

<a href="javscript:void(0)" data-id="1" class="show_hidden">Еще</a>
<a href="javscript:void(0)" data-id="2" class="show_hidden">Еще</a>
<a href="javscript:void(0)" data-id="3" class="show_hidden">Еще</a>
<div id="1" style="display:none;">
block one
</div>
<div id="2" style="display:none;">
block two
</div>
<div id="3" style="display:none;">
block three
</div>

how to change 'more' to 'hide' when clicking ?and in case of hiding back?

Answer 1

$('.show_hidden').on('click',function() {
  var $id = $(this).data('id');
  var $block = $('#' + $id)
  $block.toggle();
  $(this).html($block.is(':visible') ? 'скрыть' : 'еще')
});

https://jsfiddle.net/ntuynevs/
And you can take out these "more" and "hide" from the js code in the data attribute.

Answer 2

you can also style using css content