jQuery toggle и как сменить текст

Question

Я новичок в jQuery, так голый со мной.

Я использую функцию переключения, чтобы переключаться между контейнером div, который скрыт. При нажатии на ссылку «показать больше» отображается div, и при нажатии на ссылку «показать меньше» она скрывает div.

Вот мой код:

$('.transcript').addClass('hide') 
$(".show-more").click(function(){ 
$(".transcript").toggle(); 
$(".transcript").removeClass('hide'); 
$(".show-more").html('show less'); 
}); 

Проблема, которую я имею, что при нажатии кнопки «Показать больше», он отображает скрытые DIV, а затем изменяет текст ссылки «Показать меньше». Однако текст этой ссылки остается «меньше», когда он должен вернуться к «показать больше», когда div скрыт.

Заранее благодарен!

Answer 1

Я думаю, что я понял его, этот код, кажется, работает:

$('.transcript').addClass('hide'); 
$('.show-more').on('click', function() { 
var $this = $(this); 
if($('.transcript').is(':visible')) 
{ 
    $('.transcript').hide(); 
    $this.text('show more'); 
} 
else 
{ 
    $('.transcript').show(); 
    $this.text('show less'); 
} 
}); 

Может быть, теперь кто-то может сказать мне, если этот код является твердой или если он нуждается в работе? Он отлично работает на переднем конце, но я не уверен, что он «чистый».