tengo un simple archivo y un botón el cual me gustaría que cuando apriete cambie el texto y después de volver a tocar vuelva al anterior texto. Este es mi código html:
Lo que deseo, es cambiar el texto del botón. Que cuando la caja que dice "Master en JavaScript" se visualiza, el texto del botón sea "Cerrar". Y cuando no se visualice la caja, el texto del botón sea "Abrir"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Clase 102 </title>
<style>
button{
width: 200px;
height: 40px;
font-size: 20px;
}
#caja{
width: 300px;
height: 50px;
border: 5px dashed black;
background: #ccc;
text-align: center;
line-height: 50px;
color: black;
font-size: 19px;
font-family: Verdana;
margin-top: 15px;
}
</style>
</head>
<body>
<h1> Aprendiendo JQuery Master en JavaScript </h1>
<button id="todoenuno">
Cerrar
</button>
<div id="caja">
Master en JavaScript
</div>
</body>
<script type="text/javascript" src="JQuery.js"></script>
<script type="text/javascript" src="js.js"></script>
</html>
Archivo de js:
$(document).ready(function(){
$('#todoenuno').click(function(){
var that = $(this);
that.html('Cerrar')
$('#caja').toggle('fast');
})
});
Intenté dos cosas, una con un If:
$('#todoenuno').click(function(){
var that = $(this);
that.html('Cerrar')
if( that.html() = 'Cerrar'){
that.html('Abrir')
}
$('#caja').toggle('fast');
})
Y después lo otro, muy tonto, pero bueno:
that.html('Abrir');
that.html('Cerrar');
Se que mi consulta es tonta, pero gracias a quienes me ayuden con esta pequeña duda.
<button id="todoenuno"> Abrir </button>
Cuando se ve la caja, que diga 'Cerrar', y cuando no se ve la caja que diga 'Abrir'