Toggle Content

Name: Toggle Content
Brand: Jose Aguilar
SKU: joseaguilarblog-369
Availability: InStock
Rating: 5 (1 reviews)

Este script utiliza las listas Ul y permite al usuario alternar para mostrar el contenido de los productos de LI. Es un script de interfaz de usuario útil que ayuda a los diseñadores a ahorrar espacio y crear interfaces de usuario menos complicadas.

Para trabajar con este script lo primero que debes hacer es incluir la librería jQuery en el <head> de tu página Web.

<script type="text/javascript" src="js/jquery.js"></script>

También en el <head> necesitarás introducir las funciones que realizan los efectos deseados:

<script type="text/javascript">

$(document).ready(function () {

	$('#toggle-view li').click(function () {

		var text = $(this).children('p');

		if (text.is(':hidden')) {
			text.slideDown('200');
			$(this).children('span').html('-');
		} else {
			text.slideUp('200');
			$(this).children('span').html('+');
		}

	});

});

</script>

Y, finalmente, en el <body> tendrás que trabajar con listas de la siguiente forma por ejemplo:

<ul id="toggle-view">
	<li>
		<h3>Title 1</h3>
		<span>+</span>
		<p>Contenido 1.</p>
	</li>
	<li>

		<h3>Title 2</h3>
		<span>+</span>
		<p>Contenido 2.</p>
	</li>
	<li>
		<h3>Title 3</h3>
		<span>+</span>

		<p>Contenido 3.</p>
	</li>
</ul>

Ver ejemplo en funcionamiento

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(1 voto, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

3 respuestas a “Toggle Content”

jorge gongora dice:

23/10/2013 a las 18:30

Hola, excelente aporte, pero me sucede que al incorporarlo el toggle se muestra abierto. Hay algún modo de corregir esto? es decir, asignando a la clase del ul algo que le indique que permanezca cerrado??

saludos!

Responder
- Jose Aguilar dice:
  
  26/10/2013 a las 19:04
  
  Lo puedes hacer mediante css indicando que la lista no esté visible con el atributo display:none;
  
  Responder
Wendi Honza dice:

03/02/2012 a las 9:22

I wanted to check up and allow you to know how , very much I appreciated discovering your blog today. I’d personally consider it the honor to work at my business office and be able to make use of the tips provided on your web-site and also engage in visitors’ feedback like this. Should a position regarding guest article writer become on offer at your end, make sure you let me know.

Responder