Tengo un botón
<div class="boton_anadir_cabana" class="table-responsive" align="left">
<font face="verdana">
<b><input type="button" style="width:200px; height:28px;" name="nueva_cabana" id="nueva_cabana" value="Añadir cabaña" /></b>
</font>
</div>
con un texto por defecto "Añadir cabaña", al hacer clic en él se me abre un formulario desplegable y si vuelvo a hacer click de nuevo en el botón ese formulario se oculta, así sucesivamente gracias al método toogle(), que muestra (show()) y oculta (hide()) alternativamente los botones.
El formulario que se abre/cierra tiene como name y como id:
name="anadir_cabana" id="anadir_cabana"
Deseo que se cambie el texto dependiendo si está abierto o está cerrado:
- Si hago click en el botón y abro el formulario, el texto cambia a "Ocultar cabaña"
- Si el formulario está oculto, el texto cambia a "Añadir cabaña"
¿Por qué no cambia el texto?
Código jQuery intentado:
$(document).ready(function(){
//hide() --> ocultar ||| show() --> mostrar ||| toggle() --> ocultar/mostrar
$('#anadir_cabana').hide();
$("#nueva_cabana").on("click", function() {
$('#anadir_cabana').toggle(
// Primer click
function(e){
$(this).text('Añadir nueva cabaña');
e.preventDefault();
}, // Separamos las dos funciones con una coma
// Segundo click
function(e){
$(this).text('Ocultar añadir cabaña');
e.preventDefault();
} );
});
});