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