javascript - tag - Cómo cambiar la visibilidad de un div mediante un clic en el botón

title of page html

Question

A continuación se muestra mi código javascript, que solía mostrar un div cuando se hace clic en un button .

¿Cómo puedo ocultarlo cuando se hace clic de nuevo? ¿Y luego al hacer clic en él, div debería ser visible de nuevo?

<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
if(_hidediv)
_hidediv();
var div = document.getElementById(id);
div.style.display = ''block'';
_hidediv = function () { div.style.display = ''none''; };
}
</script>

Answer 1

En caso de que esté interesado en una solución jQuery:

Este es el HTML

<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>

Este es el script de jQuery.

$( "#button" ).click(function() {
$( "#item" ).toggle();
});

Puedes verlo trabajando aquí:

http://jsfiddle.net/BQUyT/

Si no sabes cómo usar jQuery, debes usar esta línea para cargar la biblioteca:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Y luego usa esta línea para comenzar:

<script>
$(function() {
// code to fire once the library finishes downloading.
});
</script>

Entonces para este caso el código final sería este:

<script>
$(function() {
$( "#button" ).click(function() {
$( "#item" ).toggle();
});
});
</script>

Déjeme saber si usted necesita cualquier otra cosa

Puedes leer más sobre jQuery aquí: http://jquery.com/

Answer 2

Intenta seguir la lógica:

<script type="text/javascript">
function showHideDiv(id) {
var e = document.getElementById(id);
if(e.style.display == null || e.style.display == "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
}
</script>

Answer 3

Para cambiar el estilo de visualización entre block y none , puede hacer algo como esto:

function toggleDiv(id) {
var div = document.getElementById(id);
div.style.display = div.style.display == "none" ? "block" : "none";
}

demostración de trabajo: http://jsfiddle.net/BQUyT/2/

Answer 4

con JQuery .toggle() puedes lograrlo fácilmente

$( ".target" ).toggle();

Answer 5

jQuery sería la forma más fácil si desea usarlo, pero esto debería funcionar.

<script type="text/javascript">
function showHide(){
var e = document.getElementById(''e'');
if ( e.style.display != ''none'' ) {
e.style.display = ''none'';
}
else {
e.style.display = '''';
}
}
</script>