Hacer clic para revelar. Evento de clic de CSS puro sin: objetivo

Revelación Es un bloque con información que inicialmente está oculta a los usuarios y aparece solo cuando el usuario hace clic en un botón determinado. En mi sitio en forma de spoiler hecho REGULACIONES agregando comentarios. Si hace clic en la palabra REGLAS, que está resaltada, se abrirá un bloque con reglas a continuación.

Como escribí anteriormente, mostraré varios métodos que son inherentemente similares, pero usan diferentes scripts y llevan a cabo diferentes animaciones. A continuación se muestran algunos ejemplos.

Analicemos cada uno de los métodos en orden para que puedas aplicar uno de ellos en tu sitio web. Pero antes de hacer eso, definamos la biblioteca jquery. Si lo ha conectado anteriormente, proceda a ver los métodos, si no, conéctese en el encabezado o en el sótano.

Ahora vayamos en orden.

Método número 1

De hecho, la más simple de las formas, cuando se presiona, el bloque aparece instantáneamente. Desaparece instantáneamente cuando se vuelve a presionar. Es simple. También utilizo este método.

Agregamos un guión muy simple. Puede agregarlo directamente al lugar donde desea mostrar el bloque, puede conectarlo en el encabezado o pie de página, o puede ponerlo en un archivo que luego puede conectarse al sitio, nuevamente, en cualquier lugar.

El script funciona con un bloque que tiene una clase asignada. spoiler-body y lo muestra cuando se hace clic en un botón, bloque o enlace, en general, cualquier cosa que tenga una clase asignada título de spoiler... Para mostrar un bloque, el script usa el método palanca.

Revelación Mostrar ocultar

El botón que se abrirá será el texto dentro de la etiqueta. B como dije, puedes usar cualquier etiqueta.

Bueno, asignemos los estilos mínimos. El parámetro principal es pantalla: ninguna el bloque a ocultar. Este es un requisito previo; de lo contrario, no funcionará.

Spoiler-title (cursor: pointer;) .spoiler-body (display: none; background: # f1f1f1;)

No se necesita nada más, todo debería funcionar. Hay una cosa más. Puede hacer que esta animación sea un poco más suave. Para hacer esto, entre paréntesis después del método. palanca agregue el valor en milisegundos.
Por ejemplo: palanca (500)... Ahora la apertura del bloque no ocurrirá instantáneamente, sino medio segundo 0.5. El bloque de apertura aparecerá en diagonal desde la esquina superior izquierda a la esquina inferior derecha. Puede ver esto en el ejemplo anterior.

Método número 2

Para este método y para todos los demás, se usarán los mismos bloques y clases, por lo que no lo volveré a pintar. Solo el guión en sí será diferente.

Este método abre suavemente el bloque y aparece de arriba a abajo. Para aparecer, el script usa el método slideToggle.

Aquí, como en la primera versión, puede cambiar el tiempo de animación. De forma predeterminada, su valor es 400 milisegundos. Si desea acelerar o ralentizar, agregue el valor entre paréntesis.
Por ejemplo: slideToggle (600).

Método número 3

Este método es esencialmente el mismo que el segundo, con la misma animación, pero tiene una característica interesante. El botón que se presionó para abrir el bloque cambia. En el ejemplo que vio, esto es solo texto: Mostrar texto que, cuando se abre el bloque, cambia a Ocultar texto.
Si agrega imaginación, puede agregar una imagen o un bloque en lugar de texto, que puede decorar con estilos. Utilizado de esta forma, la siguiente función.

Puede cambiar el tiempo de la animación utilizando el mismo método que en el segundo método.

Básicamente, eso es todo, estos son los tres métodos principales que quería mostrar. Cuál te conviene, tú decides. Ahora puedes organizar fácilmente el bloque que aparece después de hacer clic en el botón.

¿Utiliza spoilers en su sitio web y por qué?

Eso es todo, gracias por su atención. 🙂

¿Hay alguna forma de manejar eventos de clic en CSS sin usar JavaScript? Puedes usar el método con : objetivo... Pero, ¿y si no se puede usar? Existe otro método.

Vea una demostración. Está completamente hecho en CSS, ni una sola línea de JavaScript. Se basa en el uso original de los selectores: active y: hover.

Descripción

Primero, necesita crear un contenedor que contendrá el botón y los bloques que se muestran con el clic del mouse. La estructura de marcado será algo como esto:

Debe hacer que el .content sea invisible hasta que se presione el botón del mouse en el .wrapper. Para resolver el problema, configure la propiedad display: none para .content. Luego, cuando hacemos clic en el .wrapper, habilitaremos la propiedad display: block para el .content. Para hacer esto, establezca la propiedad display: block para .wrapper: active .content. En este estado, el .content solo será visible cuando se presione el botón del mouse. Si lo suelta, el contenido desaparece de nuevo. Para corregirlo, hagamos que cuando el cursor del mouse esté sobre .content, la propiedad display: block se asigne al elemento. Es decir, establecemos la propiedad display: block para .content: hover. El código CSS se verá así:

Contenido (pantalla: ninguno;) .wrapper: activo .contenido (pantalla: bloque;) .contenido: hover (pantalla: bloque;)

Solo queda "peinar" la apariencia y darle claridad:

Envoltorio (posición: relativa;) .button (fondo: amarillo; altura: 20px; ancho: 150px;) .content (posición: absoluta; padding-top: 20px;) .content li (fondo: rojo;)

El texto del botón en el código anterior tendrá un fondo amarillo y la información que se muestra cuando se presiona el botón del mouse tendrá un fondo rojo.

En el proceso de crear un sitio web o blog y seguir llenándolo de contenido, por diversas razones, a veces se hace necesario ocultar alguna parte del texto, colocar información más voluminosa en un bloque oculto por el momento, pero al mismo tiempo indicarle al usuario que hay algo más y darle la posibilidad de ver contenido oculto sin pasar a la siguiente línea o página.
Anteriormente, se usaba mucho javascript para implementar tal solución, pero ahora todo se puede hacer muy fácilmente usando propiedades asombrosas.

Hoy veremos la forma más sencilla de crear bloques de contenido ocultos en las páginas del sitio y en mensajes individuales, que se expanden al hacer clic en un elemento de texto específico, utilizando exclusivamente propiedades CSS3. Una sola palabra, una frase seleccionada, así como una oración completa o un icono informativo pueden servir como interruptor.
Dichos bloques se utilizan a menudo en páginas con una gran cantidad de contenido, para hacerlo más estructurado y compacto, mientras que todo el contenido se divide en los llamados grupos, en los que solo se presentan encabezados al usuario, todo el texto está oculto por predeterminado y se puede ver haciendo clic en un elemento específico (ver arriba).

Intentemos prescindir de agua innecesaria, vea todo este sencillo mecanismo en acción, con un ejemplo ilustrativo, también puede editar algo si lo desea:

Ejemplo 1

En el rol de interruptores para bloques desplegables con información adicional, se utiliza texto no seleccionado y sin marcar, con una propuesta inequívoca para hacer clic en él, que debes hacer sin miedo y duda para ver)))

Como puede ver, todo funciona bien, el contenido oculto aparece sin problemas o desaparece con un ligero clic del mouse, y al mismo tiempo usamos el mínimo de código ejecutable, tanto en el framework html como en la formación de estilos CSS. . Sin conectar bibliotecas javascript adicionales, con alarma eterna, y no si están deshabilitadas en el lado del usuario.
Todo esto es posible gracias a la pseudoclase CSS3. : comprobado aplicado a elementos de interfaz como botones de radio (). Qué hicimos realmente, en la etiqueta asignamos el valor de la casilla de verificación al atributo de tipo, así como el identificador id = "hd-1" correspondiente al identificador único para = "hd-1" interruptor del bloque actual. Ocultaremos las casillas de verificación por completo y para siempre, registrando la propiedad de visualización en la clase .hide: none;
En realidad, no hay nada especial que explicar aquí, todo el mecanismo para activar y desactivar bloques ocultos consta de tres elementos:

• Casilla de verificación - etiqueta con el significado caja atributo escribe y con un identificador de enlace específico
• Título (cambio de texto) - etiqueta con un valor de identificador único para el atributo por, (el identificador debe ser el mismo que el identificador de la etiqueta aporte con el significado caja atributo escribe).
• Bloque de contenido: una etiqueta div, que contendrá hasta tiempos mejores, hasta que el usuario haga clic, varios contenidos ocultos (texto, imágenes, etc., etc.)

Espero que, a partir de mi explicación caótica, todavía quede claro cuál es el truco. CSS aplica nuevos estilos (usando la pseudoclase comprobado) para mostrar un bloque de contenido que anteriormente estaba oculto solo cuando el usuario hace clic en un elemento que está asociado con una casilla de verificación mediante un identificador único.

De todo esto se sigue nota IMPORTANTE:

cuando utiliza varios cuadros ocultos en la misma página, cada botón de opción debe tener un ID único que sea diferente de los ID de los otros cuadros.

Entonces, en palabras, descubrimos qué es dónde y por qué, ahora veamos el esqueleto html de toda la construcción:

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >¡Haga clic aquí para abrir! < div>Contenido oculto ... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >¡Haga clic aquí para leer más! < div>Contenido oculto ...

¡Haga clic aquí para abrir!

¡Haga clic aquí para leer más!

A continuación, pasamos directamente a la formación de estilos CSS, sin los cuales toda esta estructura no funcionará. El mínimo de código, sin ningún tipo de decoración, solo resaltó un poco el fondo para que el bloque desplegable lo defina y muestre los marcos del texto oculto. Puede diseñar bloques como desee, colgar bordes, redondear esquinas, resaltar texto, etc.

1. CSS

... esconder,. ocultar + etiqueta ~ div (pantalla: ninguna;) / * tipo de texto de etiqueta * /... ocultar + etiqueta ,. ocultar: marcado + etiqueta (relleno: 0; color: verde; cursor: puntero; borde inferior: 1 px punteado en verde;). ocultar: marcado + etiqueta + div (pantalla: bloque; fondo: #efefef; - moz- cuadro- sombra: recuadro 3px 3px 10px # 7d8e8f; - webkit- cuadro- sombra: recuadro 3px 3px 10px # 7d8e8f; recuadro- sombra: recuadro 3px 3px 10px # 7d8e8f; relleno: 10px;)

/ * ocultar casillas de verificación y bloques con contenido * / .hide, .hide + label ~ div (display: none;) / * vista de texto de la etiqueta * / .hide + label, .hide: marcado + etiqueta (padding: 0; color : verde; cursor: puntero; borde inferior: 1px punteado en verde;) / * vista del texto de la etiqueta con el interruptor activo * / .hide: marcado + etiqueta (color: rojo; borde inferior: 0;) / * cuando la casilla de verificación está mostrar bloques activos con contenido * / .hide: marcado + etiqueta + div (display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px # 7d8e8f; -webkit-box-shadow: inset 3px 3px 10px # 7d8e8f; caja-sombra: inserción 3px 3px 10px # 7d8e8f; relleno: 10px;)

Todo esto es, para un ejemplo ascético, un mínimo suficiente. Pero al fin y al cabo, no seremos nosotros en absoluto, si no colgamos al menos algunos bollos, y es mejor que el usuario diga visualmente dónde hacer clic.
En el segundo ejemplo, agregué un símbolo simple en forma de más, que indica claramente que algo más está oculto aquí, cuando se presiona, instantáneamente se convierte en un menos, y a los bloques ocultos con contenido, atornillé una pequeña animación cuando aparece, y todo esto es exclusivamente con la ayuda mágica de CSS3.

2. CSS

/ * ocultar casillas de verificación y bloques de contenido * /... esconder,. ocultar + etiqueta ~ div (pantalla: ninguna;) / * tipo de texto de etiqueta * /... ocultar + etiqueta (margen: 0; relleno: 0; color: verde; cursor: puntero; pantalla: bloque en línea;) / * tipo de texto de etiqueta con interruptor activo * /... ocultar: marcado + etiqueta (color: rojo; borde inferior: 0;) / * cuando la casilla de verificación está activa, muestra bloques con contenido * /... ocultar: marcado + etiqueta + div (pantalla: bloque; fondo: #efefef; - moz- cuadro- sombra: recuadro 3px 3px 10px # 7d8e8f; - webkit- cuadro- sombra: recuadro 3px 3px 10px # 7d8e8f; recuadro- sombra: recuadro 3px 3px 10px # 7d8e8f; margen izquierdo: 20px; relleno: 10px; / * un poco de animación cuando aparece * /- webkit- animación: desvanecimiento fácil- en 0.5s; - animación moz: facilidad de desvanecimiento en 0,5 s; animación: facilidad de desvanecimiento - en 0.5s; ) / * animación cuando aparecen bloques ocultos * /@ - moz- los fotogramas clave se desvanecen (de (opacidad: 0;) a (opacidad: 1)) @ - webkit- los fotogramas clave se desvanecen (de (opacidad: 0;) a (opacidad: 1)) @ los fotogramas clave se desvanecen (de (opacidad: 0;) a (opacidad: 1)). ocultar + etiqueta: antes (color de fondo: # 1e90ff; color: #fff; contenido: " \ 002 B "; bloqueo de pantalla; flotador izquierdo; tamaño de fuente: 14px; peso de la fuente: negrita; altura: 16px; altura de línea: 16px; margen: 3px 5px; alineación de texto: centro; ancho: 16px; - webkit- border- radio: 50%; - moz- border- radio: 50%; radio de borde: 50%; ). ocultar: marcado + etiqueta: antes (contenido: " \221 2" ; }

/ * ocultar casillas de verificación y bloques con contenido * / .hide, .hide + label ~ div (display: none;) / * etiqueta de tipo de texto * / .hide + label (margin: 0; padding: 0; color: green; cursor : puntero; pantalla: bloque en línea;) / * vista de texto de etiqueta con interruptor activo * / .hide: marcado + etiqueta (color: rojo; borde inferior: 0;) / * cuando la casilla de verificación está activa muestra bloques con contenido * /. hide: marcado + etiqueta + div (display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px # 7d8e8f; -webkit-box-shadow: inset 3px 3px 10px # 7d8e8f; box-shadow : inset 3px 3px 10px # 7d8e8f; margin-left: 20px; padding: 10px; / * un poco de animación cuando aparece * / -webkit-animation: fade easy-in 0.5s; -moz-animation: fade easy-in 0.5s; animación: fade-in 0.5s;) / * animación cuando aparecen bloques ocultos * / @ -moz-keyframes fade (from (opacity: 0;) to (opacity: 1)) @ -webkit-keyframes fade ( de (opacidad: 0;) a (opacidad: 1)) @ keyframes se desvanecen (de (opacidad: 0;) a (opacidad: 1 )) .hide + etiqueta: antes (color de fondo: # 1e90ff; color: #fff; contenido: "\ 002B"; bloqueo de pantalla; flotador izquierdo; tamaño de fuente: 14px; font-weight: negrita; altura: 16px; altura de línea: 16px; margen: 3px 5px; alineación de texto: centro; ancho: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; radio de borde: 50%; ) .hide: marcado + etiqueta: antes (contenido: "\ 2212";)

Según todas las cuentas, el método es indudablemente bueno, pero como siempre, ni siquiera sorprendentemente, surgen problemas con la eterna ralentización en curso, el navegador IE, la pseudoclase comprobado solo es compatible con las versiones novena y superiores de este navegador. Para versiones anteriores de IE, todo sigue igual, debe usar javascript.

Al usar casillas de verificación ocultas, puede implementar fácilmente bloques de estilo, controles deslizantes, galerías y más.

Con todo respeto, Andrew

En casi todos los sitios puede ver botones: Más, Información, Abrir / Ocultar información y similares. Al hacer clic en ellos, se abre sin problemas un bloque con la información correspondiente. ¿Cómo implementar esto?

Suficientemente simple. Usando JS (biblioteca jQuery). Conectémoslo desde el servidor de Google:

Ahora todo el ejemplo. Para no desmontarlo en partes y no confundirlo, comentaré todos los puntos principales directamente en él.

Abrir / ocultar información

No olvide que en este ejemplo hay una conexión remota jQuery. El ejemplo no funcionará en una LAN sin acceso a Internet.
Veamos el resultado de abrir y ocultar un bloque en jQuery:

¿Cómo crear spoilers en jquery o múltiples bloques de apertura / cierre?

Debido a las numerosas solicitudes de los lectores, estoy creando una sección separada con un ejemplo y archivos para descargar. Si tiene varios bloques de spoiler que deben abrirse y cerrarse suavemente en jquery, si necesita comandos para cerrar o abrir todo, vea el ejemplo a continuación:

El ejemplo está completamente ensamblado. Todo lo que necesita es una conexión a Internet para cargar jQuery desde las bibliotecas de Google.

A menudo, en nuestros proyectos, necesitamos vincular una acción específica a una acción de usuario. Por ejemplo, cuando hace clic con el botón izquierdo en una determinada diva (bloque), el color de este bloque cambia. En general, presionar el botón izquierdo del mouse se llama clic. Para manejar este evento, se utilizan principalmente javascript y jquery, pero también es posible rastrear el clic usando css. Hablaremos de esto en este post. Por supuesto, surge una pregunta legítima, ¿por qué rastrear usando CSS? Todo funciona bien con JavaScript. Pero si js está deshabilitado en el navegador del usuario, entonces la funcionalidad del sitio no estará completa y el clic de CSS siempre funcionará. Hay varios métodos para manejar el evento de clic css. El primero está "marcado"

El método "verificado"

Primero, escribamos código html y css.

.box (ancho: 200px; alto: 100px; color de fondo: carmesí; posición: relativo; índice z: -10; / * convertirla en la capa más inferior * / margin: 0 auto; margin-top: 50px;). noncheck1, .noncheck2, .noncheck3 (ancho: 200px; alto: 100px; pantalla: bloque; posición: relativa; color de fondo: gris claro; índice z: 10px; / * capa superior * /) .check (ancho: 200px; height: 100px; display: block; position: absolute; / * gracias a la posición absoluta desplazada debajo de la capa superior * / top: 1px; left: 1px; z-index: -1; / * capa intermedia * /) etiqueta ( / * botón * / font-size: 23px; display: block;) input (/ * ocultar la casilla de verificación * / display: none;) input: comprobado ~ .box .noncheck1 (/ * ocultar la capa superior cuando está marcado, el medio la capa de texto es visible y la capa inferior * / display: none;)

Echemos un vistazo al código. Tenemos tres bloques .box, .noncheck1, .check. Todos están posicionados entre sí, por lo que el bloque .check está debajo de .noncheck1. No puse botones CSS en la lista porque no es importante. Y ahora comenzamos a tratar con el método "verificado". El método se basa en utilizar el elemento checkbox y su atributo marcado. Hacemos clic en la casilla de verificación y su estado pasa a estar marcado. A este evento, usando los selectores CSS "~" o "+", vinculamos el cambio de algo. Por ejemplo, cambiar el color del texto o el fondo de un determinado elemento. En el ejemplo, seleccionamos la casilla de verificación y en div.box div.noncheck1 se vuelve invisible (display: none), podemos ver div.check. Para diseñar el interruptor de estado de fondo como un botón, asignamos una etiqueta a nuestra casilla de verificación y creamos un botón a partir de ella. Ahora no necesitamos la casilla de verificación (tenemos un botón) y la ocultamos (pantalla: ninguna)

El método "objetivo"

.noncheck2: objetivo (pantalla: ninguno;)

El método objetivo funciona de acuerdo con este principio. Creamos un botón .butt2 con un enlace On. En el enlace, asignamos la etiqueta hash "#On". Cuando haces clic en el enlace en forma de botón con un hashtag, vas al div con id = "On". Este div llega a apuntar. La pseudoclase objetivo está activada. Hemos ocultado el div para este evento. Noncheck2 también debido a display: none. Cuando haces clic en otro botón de enlace, el div abandona el objetivo, ya que el objetivo va a otro bloque. Div.noncheck2 vuelve a aparecer.

El método "tabindex"

.butt4: focus ~ .box .noncheck3 (pantalla: ninguno;)

Este método se basa en el uso del atributo tabindex. Se basa en el hecho de que podemos establecer el foco de entrada en algunos elementos de la página web usando tabindex. El elemento recibe un evento de enfoque (.butt4: focus), que se puede manejar usando css. Usamos el selector de vecinos "~" para configurar el elemento .noncheck3 para que muestre: none cuando tenemos un evento .butt4: focus. Cuando nuestro foco se mueve del botón a otro elemento en la página, noncheck3 regresa a su estado original.