Ocultar/Mostrar capa con jQuery en wordpress

Diseño Web, Wordpress

A medida que iba escribiendo la serie de la API de betfair me estaba dando cuenta que la capa que mostraba las partes de la serie del plugin de Organize Series se iba a largando demasiado. Lo mejor sería el poder mostrar solo x partes más otro enlace al listado total pero por no tocar código. Decidí crear simplemente una capa que se expandiera al pulsar un botón.

El primer paso sería cargar la librería jquery (tanto para una web normal como una hecha con wordpress)

[html]<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>[/html]

teniendo en cuento la versión del jquery y si es con wordpress podríamos leer esta web donde nos hablan de 5 trucos para usar jQuery con WordPress

La función a usar para ocultar o mostrar la capa sería:

[html]jQuery(“#nombre_div”).slideToggle(300);[/html]

Teniendo en cuenta que el id de la capa sería nombre_div y el parámetro que pasamos a la funición, 300 en este caso, es el tiempo en milisegundos que tarda la animación, si lo vamos a usar sobre un estilo habría que poner

[html]jQuery(“.estilo”).slideToggle(300);[/html]

Ejemplo:

[html]

<input onclick="jQuery(" type="button" value="Mostrar/Ocultar Capa" /></pre>
<div id="nombreCapa" style="background-color: black; border: 1px solid;">Texto que mostramos en la capa</div>
[/html]

Probar ejemplo con .slideToggle:

Texto que mostramos en la capa

De esta forma hacemos que la capa se expanda verticalmente…si lo que queremos es hacer que la capa desaparezca tanto horizontal como verticalmente debemos usar simplemente la funcion toogle. Probar ejemplo con .toggle

Texto que mostramos en la capa

Sabiendo todo esto para aplicarlo a lo que comente al principio para la capa donde nos aparece el listado de las partes de la serie lo que podemos hacer es en el escritorio de wordpress en la configuración del plugin (Ajustes->Series Options) en Series Post List Template pondríamos:

Algo a tener en cuenta es que la llamada común a una función podría ser $(…).función… pero en wordpress si cargamos jquery con Use Google Libraries  llama a jQuery.noConflict() (y si se hace a mano también es recomendable cargar jQuery.noConflict() manualmente para evitar tener problemas en un futuro) y  la forma anterior deja de funcionar y habría que sustituir el símbolo $ por jQuery.  Si aun así quieres seguir usando $, con poner el código dentro de

One Response to “Ocultar/Mostrar capa con jQuery en wordpress”

Deja un comentario

  • (will not be published)


+ 8 = 13