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
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.
- AltaVista
- Fireball
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.
- AltaVista
- Fireball
- AltaVista
- Fireball
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.
- AltaVista
- Fireball
- AltaVista
-
- AltaVista
- Fireball
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. |