jquery - jQuery トグルとテキストの変更

Question

jQuery

$('#message div').hide();
    $('.readmore').click(function(e){
        e.preventDefault();
        $('#message div').slideToggle();
    });

html

<div id="message">
    <p class="intro">This is an introduction.</p>
            <div>
            <p>This is the first paragraph thats orginally hidden</p>
        <p>This is the second paragraph</p>
            </div>
            <a href="#" class="readmore">Read More</a>
        </div><!--message-->

[続きを読む] ボタンをクリックすると、コンテンツが slideToggled になり、全員に表示され、もう一度クリックすると非表示になり、.intro のみが表示されますが、[続きを読む] テキストを [続きを読む] と [少なく表示] の間で切り替えたいと思います。

slideToggleを使用しているときにこれがどのように可能ですか

Answer 1

クリックイベント内の現在の要素のテキストを確認し、条件を使用します。テキストを変更する必要があるかどうかを確認し、はいの場合はtext()再度使用して変更します;)。

これを試して：

 $('.readmore').click(function(e){
    e.preventDefault();
    $('#message div').slideToggle();
    $(this).text( $(this).text() == 'Read More' ? "Show Less" : "Read More"); // using ternary operator.
});