JQuery: fadeToggle () show / hide link text do not change

Question

I have a problem with fade toggle, it works when the div is visible to begin with and the "Show QR" link changes to "Hide QR". The Hide QR link should be clicked and the div hidden, but the link to the text will 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 need to check its visibility in the callback function - after fadeToggle completes. How it will work.

now you can also use:

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

Answer 2

Try the following:

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

Answer 3

try it

$('#qrshow').text($('#div_showqr').is(':hidden')? 'Show QR' : 'Hide QR');

Answer 4

change this line:

$('#qrshow').text($('#div_showqr').is('display:none')? 'Show QR' : 'Hide QR');

at

$('#qrshow').text($('#div_showqr').is(':hidden')? 'Show QR' : 'Hide QR');