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 918 03-01-2017, 09:26 PM
Último mensaje: gassip
Estrella [Aporte] La nueva generación de jQuery tendrá cambios en su nomenclatura carlsmartg 1 423 03-08-2016, 09:23 PM
Último mensaje: Boreas
  [Duda] Como implementar Jquery.cookie llProKsll 3 493 11-02-2016, 01:55 PM
Último mensaje: Vicen
Pregunta [Tutorial] Como montar tu propio gestor de contenido en localhost rodrigo5559 8 1,051 30-01-2016, 04:31 PM
Último mensaje: AbaddonOrmuz
Información [Tutorial] Detectar AdBlock y mostrar mensaje (jQuery) DarkMaster 7 913 28-01-2016, 03:32 PM
Último mensaje: TapaJerez
  Libro de jQuery en español CarlosAlberto 1 508 30-12-2015, 11:39 PM
Último mensaje: habacuc78
  [Tutorial] jQuery HTML5 Form Plugin - jQuery Form Plugin luis.ml 0 388 16-08-2015, 02:02 AM
Último mensaje: luis.ml
  Configurar Mostrar indice de archivos en una carpeta por .htaccess Kevin9908 0 483 01-07-2015, 02:23 AM
Último mensaje: Kevin9908
Ladrillo Como usar botones "disabled" y activarlos por JQuery Kevin9908 0 454 25-06-2015, 04:38 PM
Último mensaje: Kevin9908
  [PHP] Leer y mostrar archivo de texto torgar22 0 923 28-02-2015, 02:36 PM
Último mensaje: torgar22



Usuarios navegando en este tema: 1 invitado(s)