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>