Mostrar y Ocultar detalles

mgocx · #1 (**permalink**) 10/01/2012, 14:05

Hola como están?, Hoy trabajando en mi web se me planteo la necesidad de tener que poner un botón que muestre y oculte la información

Quiero que aparezca un enlace que diga "mas"

y cuando le hagan clic se muestren los detalles.

Me gustaria que funcionara sobre html5 y css3

Saludos muchas gracias a todos!

snowmanchip · #2 (**permalink**) 11/01/2012, 11:56

Lo puedes lograr con javascript o más fácil con Jquery, creas un div con la propiedad css display none y luego le añades otra clase o quitas la clase..también con show y hide lo puedes lograr, aquí un ejemplo usando hide() y show() con Jquery:

Código HTML:

Ver original<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#oculto').hide();
    $('#mostrar').click(function() {
        $('#oculto').show('slow');
    });
    
});
 
 
</script>
</head>
 
<body>
<button id="mostrar">Mostra DIV</button>
    <div id="oculto">
    Este es mi contenido Oculto
    </div>
</body>
</html>

Saludos

mgocx · #3 (**permalink**) 11/01/2012, 12:00

Esto me sirve muchas Gracias!!!