Jquery Toggle Elements

(No Ratings Yet)

Loading ...

1,271 views

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
How to use jquery.toggleElements.js

1.
Download jQuery
Download toggleElements.zip from bottom link.

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>

Demo: http://jquery.andreaseberhard.de/toggleElements/
Download: http://jquery.andreaseberhard.de/download/toggleElements.zip
Source: http://jquery.andreaseberhard.de/toggleElements/

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/stumbleupon_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/delicious_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/blinklist_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/furl_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/technorati_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/magnolia_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/google_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/myspace_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/facebook_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/sphinn_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/mixx_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/twitter_32.png

Related Listings:

jQuery Tabs Address – Deep linking plugin The jQuery Address plugin provides powerful deep linking capabilities and...
Row checkbox toggle using Jquery So since I’ve been playing with jQuery on my spare...
jQuery FrameReady The best way to see how this works is to...
Scrollable Elements usign jQuery Plugin You can study the workings of Scrollable in the following...
Boxover – Javascript/DHTML Tooltips BoxOver uses javascript / DHTML to show tooltips on a...