¿Cómo cambiar el texto del botón de alternar cuando se presiona?

Me gustaría poder presionar un botón que diga “ocultar” y luego decir “mostrar” cuando el usuario haga clic en el botón. En el código de abajo, la parte de conmutación funciona, pero ahora necesito el texto “ocultar” para pasar a “mostrar” una vez que el contenido está oculto.

Tomé el código de alternar de: http://thedesignspace.net/MT2archives/000298.html#.UW61YqKG33U

 function toggle(element) { document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none"; }  
Header

  • Text here
  • Text here
  • Text here
  • Text here

Cambie su código de botón a algo como esto:

  

Y cambia tu guión a algo como esto

  

Ya que tu pregunta está etiquetada como jQuery, usa jQuery:

  $(".hideLink").on("click", function(){ if($(this).text()=="Hide Products - ") { $(this).text("Show Products - "); } else { $(this).text("Hide Products - "); } $(".ISProductBody").toggle(); return false; }); 

Ejemplo: http://jsfiddle.net/calder12/KCj3r/

Mi “respuesta” es una modificación de la respuesta de Rick Calder. Utilicé el código provisto para un escenario similar, pero tenía tags HTML dentro del botón (en este caso, icons de Font Awesome). Pensé que podría ayudar a algunas personas a aplicar la solución a otras situaciones.

Las únicas modificaciones que tuve que hacer fueron cambiar “.text” por “.html” y agregar “.addClass” / “.removeClass” para cambiar el estilo del botón. (CSS no está incluido ya que es trivial aquí).

Aquí está el código que utilicé:

 $(".expand-button .button").on("click", function(){ if($(this).html()==" Watch Video  ") { $(this).html(" Hide Video  "); $(this).addClass("secondary"); } else { $(this).html(" Watch Video  "); $(this).removeClass("secondary"); } $(".expand-button-content").fadeToggle(); }); 

Gracias, Rick y el OP.

 var button = document.querySelector(".button") var text = document.querySelector(".text") var t button.addEventListener("click",function(){ if(text.textContent=="Like"){ t = "Liked" } else{ t="Like" } text.textContent=t; }) 

Este es un ejemplo de un botón “Me gusta” que cambia a “Me gusta”. El enfoque es realmente simple, si el texto es similar, la variable t está configurada como “me gusta” y viceversa Y luego reemplaza el contenido del texto. Trabajó para mí Saludos,: D

 TextBox.innerHTML = " "; ButtonId.onclick = function(){ if (TextBox.innerHTML == " ") { TextBox.innerHTML = "HI"; } else { TextBox.innerHTML = " "; } } 
 ReadMore: