slideToggle（）でのテキストの変更が期待どおりに行われない

Question

テーブルの表示が切り替えられたときに要素内のテキストを変更したい。私はそれらを切り替えることができますが、要素内のテキストを変更することはできません。

<table class="table funds-table"> 
<thead class="table-head"> 
<tr> 
    <th id="equity-text">EQUITY</th> 
    <th id="eq-show-less">SHOW LESS</th> 

</tr> 
</thead> 

<tbody id = "equity-body"> 
<tr> 

    <td class = "fund-name"> 

    <div class = "col-xs-1 padding-lr-zero checkbox-div"><input type="checkbox" id = "checkbox1"> 
     <label for="checkbox1"><span class="checkbox"><img src="icons/check_dis.png"></span></label></div> 

    <div class = "col-xs-11 fund-name-div"><span class = "span-fund-name">HDFC DYNAMIC FUND HDFC DYNAMIC FUND HDFC DYNAMIC</span><p class = "currently-inv"> Currently invested <span class = "curr-span-amt">Rs. 50,000</span></p></div> 

    </td> 

    <td class = "fund-amount"><p class = "fund-amount-inner">Rs. 50,00,000</p></td> 
</tr> 

<tr> 

    <td class = "fund-name"> 

    <div class = "col-xs-1 padding-lr-zero checkbox-div"><input type="checkbox" id = "checkbox2"> 
     <label for="checkbox2"><span class="checkbox"><img src="icons/check_dis.png"></span></label></div> 

    <div class = "col-xs-11 fund-name-div"><span class = "span-fund-name">HDFC DYNAMIC FUND HDFC DYNAMIC FUND HDFC DYNAMIC</span></div> 

    </td> 

    <td class = "fund-amount"><p class = "fund-amount-inner">Rs. 50,00,000</p></td> 
</tr> 

それはhiddenときtbodyがvisibleではなく、ときに警告します。ここで

$('#eq-show-less').on('click',function(){ 

    $('#equity-body').slideToggle('slow'); 

    }); 


    $(function(){ 
    if ($('#equity-body').is(':visible')) { 
     $('#eq-show-less').text("SHOW LESS"); 
     alert('visible'); 
    } 

    if($('#equity-body').is(':hidden')){ 
     $('#eq-show-less').text("SHOW MORE"); 
     alert('not visible'); 
    } 
    }); 

はtbodyが表示され、tbodyは、あなただけのために問題がある

Answer 1

に隠されているときが以上を示したときに、私はにテキストを変更したいfiddle

が以下を示していますページが読み込まれたときに要素の状態を確認してください（:visible）。

これを修正するには、fadeToggle()のアニメーションが完了したときに確認する必要があります。このように、あなたがコールバックパラメータを使用することができることを行うには：

$('#eq-show-less').on('click', function() { 
    $('#equity-body').slideToggle('slow', function() { 
     $('#eq-show-less').text($(this).is(':visible') ? 'SHOW LESS' : 'SHOW MORE'); 
    }); 
}); 

Updated fiddle