html - mismo - ¿Cómo puedo ocultar/mostrar un div cuando se hace clic en un botón?
mostrar y ocultar texto en html (8)
Tengo un div que contiene un asistente de registro, y necesito ocultar / mostrar este div cuando se hace clic en un botón. ¿Cómo puedo hacer esto?
A continuación, te muestro el código.
Gracias :)
<div id="wizard" class="swMain">
<ul>
<li><a href="#step-1">
<label class="stepNumber">1</label>
</a></li>
<li><a href="#step-2">
<label class="stepNumber">2</label>
</a></li>
<li><a href="#step-3">
<label class="stepNumber">3</label>
</a></li>
<li><a href="#step-4">
<label class="stepNumber">4</label>
</a></li>
</ul>
<div id="step-1">
<h2 class="StepTitle">Perfil</h2>
<table cellspacing="3" cellpadding="3" align="center">
<tr>
<td align="center" colspan="3"> </td>
</tr>
<tr>
<td align="right">Username :</td>
<td align="left">
<input type="text" id="username" name="username" value="" class="txtBox">
</td>
<td align="left"><span id="msg_username"></span> </td>
</tr>
<tr>
<td align="right">Password :</td>
<td align="left">
<input type="password" id="password" name="password" value="" class="txtBox">
</td>
<td align="left"><span id="msg_password"></span> </td>
</tr>
</table>
</div>
Esto funciona:
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == ''block'') ? ''none'' : ''block'';
}
<!DOCTYPE html>
<html>
<body>
<a href="javascript:showhide(''uniquename'')">
Click to show/hide.
</a>
<div id="uniquename" style="display:none;">
<p>Content goes here.</p>
</div>
</body>
</html>
Esto no puede hacerse solo con HTML / CSS. Necesita usar javascript aquí. En jQuery sería:
$(''#button'').click(function(e){
e.preventDefault(); //to prevent standard click event
$(''#wizard'').toggle();
});
La siguiente solución es:
- más breve Algo similar a here . También es mínimo: la tabla en el DIV es ortogonal a su pregunta.
- más rápido:
getElementByIdse llama una vez desde el principio. Esto puede o no adaptarse a sus propósitos. - Utiliza JavaScript puro (es decir, sin JQuery).
- Utiliza un button . Tu gusto puede variar
- extensible: está listo para agregar más DIV, compartiendo el código.
mydiv = document.getElementById("showmehideme");
function showhide(d) {
d.style.display = (d.style.display !== "none") ? "none" : "block";
}
#mydiv { background-color: #ddd; }
<button id="button" onclick="showhide(mydiv)">Show/Hide</button>
<div id="showmehideme">
This div will show and hide on button click.
</div>
La tarea se puede hacer javascript simple sin jQuery, etc.
<script type="text/javascript">
function showhide() {
document.getElementById("wizard").className = (document.getElementById("wizard").className=="swMain") ? swHide : swMain;
}
</script>
Esta función es simple si la instrucción que se ve si el asistente tiene clase swMain y cambia de clase a swHide y de lo contrario, si no es swMain , cambie a swMain . Este código no admite múltiples atributos de clase, pero en este caso es suficiente.
Ahora tienes que hacer una clase css llamada swHide que tenga display: none
Luego agregue el botón onclick = "showhide ()"
Tan fácil que es.
Puedes hacer esto completamente con html y css y yo tengo.
HTML Primero le das al div que deseas ocultar una ID para apuntar como #view_element y una clase para apuntar como #hide_element . Puede si desea hacer ambas clases, pero no sé si puede convertir ambas en ID. Luego, haz que tu botón Mostrar apunte a tu identificación del programa y tu botón Ocultar a tu clase oculta. Eso es todo por el html que se oculta y muestra en el CSS.
CSS El CSS para mostrar y ocultar esto debería verse algo como esto
#hide_element:target {
display:none;
}
.show_element:target{
display:block;
}
Esto debería permitirle ocultar y mostrar elementos a voluntad. Esto debería funcionar bien en tramos y divs.
Use JQuery. Debe configurar un evento de clic en su botón que alternará la visibilidad de su div asistente.
$(''#btn'').click(function() {
$(''#wizard'').toggle();
});
Consulte el sitio web de JQuery para obtener más información.
Esto también se puede hacer sin JQuery. Usando solo JavaScript estándar:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == ''block'')
e.style.display = ''none'';
else
e.style.display = ''block'';
}
</script>
A continuación, agregue onclick="toggle_visibility(''id_of_element_to_toggle'');" al botón que se usa para mostrar y ocultar el div.
$(''#btn'').click(function() {
$(''#wizard'').toggle();
});
si quiere comenzar con el div oculto, debe agregar style="display:none;" , Me gusta esto:
<div style="display:none;"> </div>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show and hide div with JavaScript</title>
<script>
var button_beg = ''<button id="button" onclick="showhide()">'', button_end = ''</button>'';
var show_button = ''Show'', hide_button = ''Hide'';
function showhide() {
var div = document.getElementById( "hide_show" );
var showhide = document.getElementById( "showhide" );
if ( div.style.display !== "none" ) {
div.style.display = "none";
button = show_button;
showhide.innerHTML = button_beg + button + button_end;
} else {
div.style.display = "block";
button = hide_button;
showhide.innerHTML = button_beg + button + button_end;
}
}
function setup_button( status ) {
if ( status == ''show'' ) {
button = hide_button;
} else {
button = show_button;
}
var showhide = document.getElementById( "showhide" );
showhide.innerHTML = button_beg + button + button_end;
}
window.onload = function () {
setup_button( ''hide'' );
showhide(); // if setup_button is set to ''show'' comment this line
}
</script>
</head>
<body>
<div id="showhide"></div>
<div id="hide_show">
<p>This div will be show and hide on button click</p>
</div>
</body>
</html>