Accion al dar click a un botón

juandedios · #1 (**permalink**) 03/12/2013, 17:30

Hola, quisiera que al dar click a un botón me muestre un DIV con su contenido y al dar click al mismo botón lo oculte.

Como podría hacer?

Saludos,

EmpireFX · #2 (**permalink**) 03/12/2013, 17:57

Código Javascript:

Ver original<html>
    <head>
        <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                //Ocultamos el div
                $('.myClass').hide();
 
                //Al hacer click en el boton...
                $('.mostrar').on('click', function(){
                    var myClass = $('.myClass');
 
                    //Si .myClass esta oculto mostrarlo...
                    if (myClass.is(':hidden')) {
                        myClass.show();
                    //De lo contrario ocultarlo.
                    }else if(myClass.is(':visible')){
                        myClass.hide();
                    };
                });
            });
        </script>
        <style type="text/css">
            .myClass{background-color: red;width: 150px; height:100px; margin-right: auto;
            margin-left: auto;}
        </style>
    </head>
    <body>
        <button class="mostrar">Aparece</button>
 
        <div class="myClass">
            <p>Este es mi div.</p>
        </div>
    </body>
</html>