jQueryトグルとテキストの変更方法

Question

私はjQueryを使い始めました。

私はトグル機能を使用して、表示されていないdivコンテナを切り替えることができます。 'もっと表示する'リンクをクリックするとdivが表示され、 '表示が少ない'リンクをクリックするとdivが非表示になります。

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

私が午前問題は、あなたがクリックしたときに「もっとを表示」ということで、それは隠されたdiv要素を表示し、「少ない示し」にリンクのテキストを変更します。

は、ここに私のコードです。しかし、そのリンクのテキストは、divが隠されているときに「もっと表示する」に戻るべきときには、「show less」のままです。

ありがとうございます！

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'); 
} 
}); 

そのコードは、固体またはそれが仕事を必要とする場合であれば多分今、誰かが私を伝えることができますか？フロントエンドでうまく動作しますが、「クリーン」かどうかはわかりません。