Problemas alternar texto del enlace con JQ

Question

Trato de usar este código para alternar el texto en el enlace:

var showText="<span>Open</span> &darr;";
var hideText="<span>Close</span> &uarr;";
$('h1').before('<a href="javascript:;" id="hc_toggle_close">' + showText + '</a>');
$('#hc_toggle_close').click(function () {
    $('#hc_toggle_close:contains("Open")').html(hideText);
    $('#hc_toggle_close:contains("Close")').html(showText);
});

Pero no funciona! Así como de costumbre, si ... de construcción más. Podría alguien por favor que me señale lo que está mal aquí. Gracias!

Answer 1

Utilice la función toggle helper:

var showText="<span>Open</span> &darr;";
var hideText="<span>Close</span> &uarr;";
$('h1').before('<a href="javascript:;" id="hc_toggle_close">' + showText + '</a>');
$('#hc_toggle_close').toggle(
  function () {
    $('#hc_toggle_close').html(hideText);
  },
  function () {
    $('#hc_toggle_close').html(showText);
  }
);

A partir de la documentación de toggle:

  

Cada vez que se hace clic en un elemento coincidente,   la primera función especificada es disparado,   cuando se hace clic de nuevo, el segundo es   despedido. Todos los clics subsiguientes siguen   para girar a través de las dos funciones.