jQuery: fadeToggle() show / hide text of link not change

Question

I have a problem with fade toggle, It works when the div is visible to start with and link "Show QR" change to "Hide QR". Link "Hide QR" should be clicked and div hidden but link of text not change to "Show QR"

html:

<a class="emotTab" id="qrshow" href="javascript:void(0);">Show QR</a>
<div id="div_showqr">Content.....</div>

javasctipt :

$("#qrshow").click(function(){
$("#div_showqr").fadeToggle('slow');
    $('#qrshow').text($('#div_showqr').is(':visible')? 'Hide QR' : 'Show QR');
$('#qrshow').text($('#div_showqr').is('display:none')? 'Show QR' : 'Hide QR');
});

Answer 1

jsBin demo

$("#qrshow").click(function(){
   $("#div_showqr").fadeToggle( function(){
     $('#qrshow').text($(this).is(':hidden')? 'Show QR' : 'Hide QR');
   });
}); 

We have to check it's visibility in a callback function - after the fadeToggle is over. Than it will work.

now you can use also:

$('#qrshow').text($(this).is(':visible')? 'Hide QR' : 'Show QR');

Answer 2

Try this:

html:

<div id="qrshow" class="emotTab">Show Qr</div>
<div id="div_showqr">Content.....</div>

javascript:

$(document).ready(function() { 
$('#qrshow').click(function(){
text = $(this).text();

$('#div_showqr').fadeToggle('slow');

if(text =='Show QR'){
    $(this).text('Hide QR');
} else {
    $(this).text('Show QR');
}
});
});