jquery.toggleElements.js
Toggle HTML-Elements with jQuery

toggleElements is designed to hide informations on your site and show it only when the user requests more information.

Features

  • unobtrusive script, simple to setup
  • full customizeable via CSS
  • only a class and a title-attribute must be added to your original HTML
  • nesting toggleElements is possible

This page uses jQuery Version

Version 1.3, 2007-09-11

Tested on Windows XP SP2 with
- IE 5.5 + 6 + 7
- Firefox 1.5.0.7 + 2.0.0.3
- Opera 8.0 + 8.5 + 9.00

Download

E x a m p l e s:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat. Sed rutrum. Nam aliquam, neque id molestie malesuada, tellus odio facilisis augue, in vulputate massa neque elementum risus. Aenean pretium, diam quis condimentum imperdiet, est augue pretium quam, id varius ligula justo ultricies ante. In feugiat. Nulla magna. Nullam non metus at dui aliquet blandit. Nunc mi. Aenean mauris tellus, faucibus non, semper ac, facilisis non, orci. Proin cursus nibh in tellus. Fusce posuere nisi eu ligula. Morbi volutpat est a diam lobortis consectetuer. Donec placerat, eros vel cursus ornare, leo mi aliquet velit, quis aliquet ipsum augue eget augue. Donec ligula sem, eleifend at, mattis et, facilisis at, augue.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat. Sed rutrum. Nam aliquam, neque id molestie malesuada, tellus odio facilisis augue, in vulputate massa neque elementum risus. Aenean pretium, diam quis condimentum imperdiet, est augue pretium quam, id varius ligula justo ultricies ante. In feugiat. Nulla magna. Nullam non metus at dui aliquet blandit. Nunc mi. Aenean mauris tellus, faucibus non, semper ac, facilisis non, orci. Proin cursus nibh in tellus. Fusce posuere nisi eu ligula. Morbi volutpat est a diam lobortis consectetuer. Donec placerat, eros vel cursus ornare, leo mi aliquet velit, quis aliquet ipsum augue eget augue. Donec ligula sem, eleifend at, mattis et, facilisis at, augue.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat. Sed rutrum. Nam aliquam, neque id molestie malesuada, tellus odio facilisis augue, in vulputate massa neque elementum risus. Aenean pretium, diam quis condimentum imperdiet, est augue pretium quam, id varius ligula justo ultricies ante. In feugiat. Nulla magna. Nullam non metus at dui aliquet blandit. Nunc mi. Aenean mauris tellus, faucibus non, semper ac, facilisis non, orci. Proin cursus nibh in tellus. Fusce posuere nisi eu ligula. Morbi volutpat est a diam lobortis consectetuer. Donec placerat, eros vel cursus ornare, leo mi aliquet velit, quis aliquet ipsum augue eget augue. Donec ligula sem, eleifend at, mattis et, facilisis at, augue.

  • Google
  • AltaVista
  • Fireball
  • Google
  • AltaVista
    • Google
    • AltaVista
    • Fireball
Lorem Ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum erat. Sed rutrum. Nam aliquam, neque id molestie malesuada, tellus odio facilisis augue, in vulputate massa neque elementum risus. Aenean pretium, diam quis condimentum imperdiet, est augue pretium quam, id varius ligula justo ultricies ante. In feugiat. Nulla magna. Nullam non metus at dui aliquet blandit. Nunc mi. Aenean mauris tellus, faucibus non, semper ac, facilisis non, orci. Proin cursus nibh in tellus. Fusce posuere nisi eu ligula. Morbi volutpat est a diam lobortis consectetuer. Donec placerat, eros vel cursus ornare, leo mi aliquet velit, quis aliquet ipsum augue eget augue. Donec ligula sem, eleifend at, mattis et, facilisis at, augue.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam erat magna, convallis id, ultricies in, molestie in, justo. In ornare metus quis lectus. Vivamus suscipit sapien eget sapien. Sed posuere, nulla vel luctus adipiscing, tellus nisl blandit sem, eu cursus diam tellus hendrerit est. Nulla lectus. Nullam feugiat sollicitudin magna. Fusce adipiscing arcu non quam condimentum lacinia. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula bibendum magna. Suspendisse potenti. Cras ut pede at est sollicitudin accumsan. Suspendisse potenti.

Ut ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec mauris. Ut magna. Etiam id dui dapibus nisl tincidunt sagittis. Curabitur eu eros. Proin at tortor at erat porttitor fringilla. Nunc neque lacus, aliquet at, viverra sit amet, ultrices ac, leo. Phasellus in odio. Fusce non lectus vestibulum ante lacinia suscipit. Nulla purus. Nullam et augue. Nunc ligula mi, rutrum quis, accumsan eu, tristique nec, sapien. Phasellus augue ante, consequat vitae, pulvinar nec, sodales quis, nunc. Morbi ligula risus, interdum vel, tincidunt et, auctor at, ipsum. Sed nulla nunc, viverra a, elementum sit amet, ultrices nec, enim.

How to use jquery.toggleElements.js

1.
Download jQuery
Download toggleElements.zip View Source

2.
Just add jQuery and toggleElements to the HEAD-Section of your HTML ... 

<head>
...
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.toggleElements.js"></script>
...
</head>

3.
Customize toggleElements.css to your needs and add it to the HEAD-Section of your HTML ... 

<head>
...
<link rel="stylesheet" type="text/css" href="toggleElements.css" />
...
</head>

4.
Wrap a DIV-Element with class="toggler-c" around the HTML-Code you want to toggle. The text used in the title-Attribute will be used to create the Toggle-Link.
You can also add the class="toggler-c" and the title-Attribute to any other existing element. 

...
<div class="toggler-c" title="Example 1">
  Your HTML here ...
</div>
...
<ul class="toggler-c" title="Example 2">
  <li>Google</li>
  <li>Altavista</li>
  <li>Fireball</li>
</ul>
...

5.
Activate toggleElements on document.ready 

<script type="text/javascript">
$(document).ready(function(){
	$('div.toggler-c').toggleElements(
		{ fxAnimation:'slide', fxSpeed:'slow', className:'toggler' } );
	$('ul.toggler-c').toggleElements();
});
</script>

Options for jquery.toggleElements.js

Option Value
fxAnimation "slide", "show", or "fade" (default "slide")
fxSpeed "slow", "normal", "fast" or the number of milliseconds
(e.g. 1000 for 1 second, default "normal")
className use this classname as prefix for the CSS-Classes (default toggler, see CSS-File toggleElements.css)
removeTitle remove the Title-Attribute of the HTML-Element, true or false (default true)
showTitle add title-Attribute to the Toggle-Link (default false)
onClick Callback Function
This function is called immediatly after click on the Toggle-Link. You can return false to cancel the click.
onHide Callback Function
This function is called immediatly after the content is hidden.
onShow Callback Function
This function is called immediatly after the content is shown.

© Andreas Eberhard, andreas.eberhard(at)gmail.com
http://jquery.andreaseberhard.de/

Top |
下载代码说明
X关闭

jquery内容渐隐显示隐藏效果

jquery内容渐隐显示隐藏效果