Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Mostrar y Ocultar Contenido con jQuery y CSS
#1
En esta ocasión les voy a explicar una manera muy sencilla para ocultar y mostrar información utilizando jQuery; esto es muy útil para, por ejemplo, realizar un Spoiler en tu web. Para aplicar este tutorial, se necesita conocimientos básicos/medio en CSS y jQuery.

Esto es muy sencillo de utilizar, y lo haremos con un pequeño ejemplo de Oculta/Mostrar contenido.

Primero definiremos el estilo que nuestra caja de spoiler tendrá, por lo que (si desean que quede como en este tutorial, deben de agregar lo siguiente al CSS de su web.

Código:
#caja{
background: rgb(179,220,237);
background: -moz-linear-gradient(top,  rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,220,237,1)), color-stop(50%,rgba(41,184,229,1)), color-stop(100%,rgba(188,224,238,1)));
background: -webkit-linear-gradient(top,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%);
background: -o-linear-gradient(top,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%);
background: -ms-linear-gradient(top,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%);
background: linear-gradient(top,  rgba(179,220,237,1) 0%,rgba(41,184,229,1) 50%,rgba(188,224,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=0 );
border: 4px solid #000000;
        border-radius:5px;
display:none;
width: 50%;
}

Posteriormente, debemos de colocar lo siguiente dentro de las etiquetas head

Código:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script language="javascript">
jQuery.noConflict();        
jQuery(document).ready(function(){
            jQuery("#ocultarmostrar").click(function(){
                
                var a = jQuery("#caja");
                var propiedad = a.css("display");
                if (propiedad=="block"){
                    a.css("display", "none");
                }else{
                    a.css("display", "block");
                }
            })
            
        })
    </script>

Para probar el ejemplo, simplemente deben de colocar los siguiente:

Código:
<a href="#" id="ocultarmostrar">Mostrar/Ocultar</a>
<div id="caja">Contenido oculto</div>

El CSS de la caja solamente es un CSS de referencia, ya depende de cada usuario como es que coloca los estilos; por ello al principio de la entrada se aclara que se debe de tener conocimientos medios de CSS.

Funcionando:

Ejemplo de jQuery y CSS


[Imagen: 88x31.png]
Artículo publicado con Licencia Creative Commons. (Attribution-NonCommercial-NoDerivs 3.0 Unported (CC BY-NC-ND 3.0))

Si deseas publicarlo en otros sitios tendrás que publicar la licencia, la fuente, y la autoría.

Fuente: Mostrar y Ocultar Contenido con jQuery y CSS
WWW
#2
mmm muy util, leda elegancia, movimiento y sobre todo rapidez a nuestras webs, gracias por compartir
#3
gracia por la informacion Gran sonrisa


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  jQuery: ocultar imágenes rotas Jvh_22 10 781 03-01-2017, 09:26 PM
Último mensaje: gassip
Estrella [Aporte] La nueva generación de jQuery tendrá cambios en su nomenclatura carlsmartg 1 336 03-08-2016, 09:23 PM
Último mensaje: Boreas
  [Duda] Como implementar Jquery.cookie llProKsll 3 422 11-02-2016, 01:55 PM
Último mensaje: Vicen
Pregunta [Tutorial] Como montar tu propio gestor de contenido en localhost rodrigo5559 8 910 30-01-2016, 04:31 PM
Último mensaje: AbaddonOrmuz
Información [Tutorial] Detectar AdBlock y mostrar mensaje (jQuery) DarkMaster 7 728 28-01-2016, 03:32 PM
Último mensaje: TapaJerez
  Libro de jQuery en español CarlosAlberto 1 452 30-12-2015, 11:39 PM
Último mensaje: habacuc78
  [Tutorial] jQuery HTML5 Form Plugin - jQuery Form Plugin luis.ml 0 328 16-08-2015, 02:02 AM
Último mensaje: luis.ml
  Configurar Mostrar indice de archivos en una carpeta por .htaccess Kevin9908 0 378 01-07-2015, 02:23 AM
Último mensaje: Kevin9908
Ladrillo Como usar botones "disabled" y activarlos por JQuery Kevin9908 0 393 25-06-2015, 04:38 PM
Último mensaje: Kevin9908
  [PHP] Leer y mostrar archivo de texto torgar22 0 824 28-02-2015, 02:36 PM
Último mensaje: torgar22



Usuarios navegando en este tema: 1 invitado(s)