jQuery: fadeToggle() muestra/oculta el texto del enlace no cambia

Question

Tengo un problema con el botón fade, funciona cuando el div está visible para comenzar y el enlace "Show QR" cambia a "Hide QR". Enlace "Ocultar QR" se debe pulsar y div oculto, pero enlace de texto no cambia a "Mostrar 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'); 
    }); 
}); 

Tenemos que comprobar que es la visibilidad en una función de devolución de llamada - después de la fadeToggle ha terminado. De lo que funcionará

ahora se puede utilizar también:

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

Answer 2

probar esto

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

Answer 3

cambiar esta línea:

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

a:

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

Answer 4

Prueba esto:

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