Toggle-o-matic v0.2 for Mootools 1.2

- Troy

v0.2

Update: As a result of some great feedback I got from a new mootools forum, I added two more features and even ended up shortening the code in the process. Now, the “_toggle” element automatically gets a cursor pointer, and toggle-o-matic supports multiple toggles from one slide control. Read on to learn more.

Often, I have found myself in the middle of a web design project, needing to add the slide effect to multiple elements. For a project I did a while ago (back in the dark ages when I was still using jquery), I created a simple function that would create multiple slide elements by adding the class “anything_toggle” to the toggle control and “anything_slide” to the element I wanted to slide.

Here is that same function for mootools 1.2:
Imagine your web design has a single set of instructions that you want to toggle:

Add the class “anything_toggle” to an <a> tag
then add the class “anything_slide” to the <div> tag that contains the instructions.

Or you want to have a single control open and toggle multiple elements:

Add the class “whatever_toggle” to your control element
then add the class “whatever_slide” to each element you want to slide.

With the Toggle-o-matic code in your website, that is all you have to do.

Demo

Check out a live demo of the toggle-o-matic v0.2 here.

Features

create a slide effect with no coding or configuration
automatically adds cursor to toggle control
use a single control to toggle many elements or one

Installation

Install mootools 1.2, then copy and paste the code before the </head> tag in your html file, or save it as a .js and pull it in.

Download mootools 1.2, in my opinion, the best javascript library around.
Download mootools 1.2 “more” library (which includes the FX.slide)
Upload the toggle-o-matic code between script tags (<script type=”text/javascript”> </script>), before the end of the head tag in your html (or)
Save the javascript code below as toggleomatic.js (or whatever you like) and link to in the head tag (<script src=”/js/toggleomatic.js” type=”text/javascript”>)

Configuration

Javascript

To integrate this code into your web design, all you have to do is call in the function as a file or in the head tag.

var toggleOmatic = function() {
	var toggleAll = $(document.body).getElements('[class$=_toggle]');
	toggleAll.each(function(item){
		item.setStyle('cursor', 'pointer');
		var toggleAllClass = item.getProperty('class');
		toggleAllClass = toggleAllClass.replace("_toggle", "");
		var slideAllClass = toggleAllClass + "_slide";
		var slideAll = $(document.body).getElements('.' + slideAllClass);
		slideAll.slide('hide');
		$(item).addEvent('click', function(){
				slideAll.slide();
		});
	});
} 
 
window.addEvent('domready', function() {
toggleOmatic();
});

HTML

You can put the toggle class “*_toggle” in any element, and you can add the “*_slide” FX to one or more web design elements that you want to slide. See an example below.

<a class="this_toggle" href="#">Toggle</a>
 
<div class="this_slide">Toggle this element</div>
 
 
<a class="abunch_toggle" href="#">Toggle</a>
 
<div class="abunch_slide">Toggle many elements</div>
 
 
<div class="abunch_slide">Toggle multiple elements</div>
 
 
<div class="abunch_slide">Multiple element toggle</div>

Notes

Download mootools toggle-o-matic v0.2

*Including the mootools 1.2 core, the mootools 1.2 “more” library, the ‘Toggle-o-matic’ javascript file, and a simple html file.

Download mootools toggle-o-matic v0.1 here

You can use this however you like, and please drop me a comment letting me know if you use it in your web development project and what you think.

Thanks and I hope you find it as useful as I have.

This work is dedicated to the Public Domain.

Posted in Mootools 1.2, Web Design

Tags: free download, interface design, javascript, mootools, mootools plugins

Comments (19)

Ray
Tuesday Jul 29, 4:48 am

Thanks for this great script. It's exactly what I needed!
TimAk
Wednesday Sep 03, 5:13 am

hello there. its a nice script and its what i was looking for. i plan to edit it a little bit (hopefully, i suck at all that) to enable it to remember which toggled sections where open. Thats alright, yea?

also, i plan on selling PHPBB themes and plan to have this integrated in some of them. if you disapprove, i can understand and will not include the script.

anyway, thanks again
Troy
Wednesday Sep 03, 12:44 pm

Thanks TimAk, you can use this script however you like. Take a moment to read the public domain license, the wording is great. Basically says that I don't have any claim over telling you what you can do with it.
TimAk
Friday Sep 05, 12:53 am

ok, thank you. i have modified your script a little bit. havent done the memory part yet (where it remembers whats open/closed) but only put a new class in to open when _slide closes. it works perfectly except for a minor problem.

when viewed in internet explorer, the contents of the div are not hidden. they simply slide up and remain visible, hovering over everything else.

do you have a fix for this?
Troy
Friday Sep 05, 7:31 am

If you have a link with a working example, I can take a look.
Greg
Sunday Sep 07, 9:21 am

Great code, it works nicely. Thanks for your hard work.

I'm using it on an FAQ page with about 8 elements. Is it possible to close an open element if another link is clicked, so that only one element is open at a time?
Troy
Sunday Sep 07, 10:30 am

Actually Greg, Mootools has a great plugin for that already, you can check out a tutorial on Accordians here: http://www.consideropen.com/blog/2008/09/30-days-of-mootools-12-tutorials-day-17-accordion/

Hope this helps.
russell
Thursday Oct 09, 5:45 am

Hi Troy, nice n simple, thanks. I used to have all the sliding elements hand-coded, with the css hiding the _slide elements so that they are already hidden on load.

I don't use 'display:none;' as that could seem spammy to google and I want them to index the content, instead I use:
'
position:absolute;
left:-999px;
width:0;
height:1px;
overflow:hidden;
'

Do you reckon there's any way of using something like this so that the _slide elements are hidden on load?

Thanks

Jim
Troy
Thursday Oct 09, 12:37 pm

This uses the Fx.Slide plugin which doesn't set the style to display:none, instead it wraps the "hidden" content in a div and styles it similarly to what you described.

<div style="margin: 0px; overflow: hidden; position: static; height: 0px;">
<span class="one_slide" style="margin: -18px 0px 0px;">slide 1</span>
</div>
Luke
Saturday Oct 11, 4:19 am

Great function.

One thing though, I love the blog, but the navigation is a little too <em>addictive</em>!
russell
Monday Oct 13, 2:36 am

Thanks for the clarification Troy, and thanks for posting this code, it's cleaned up mine a heap!
Stephen Clark
Sunday Oct 19, 9:03 am

This is great!!

How do I enable the toggle link to change when the content is open or closed? So I can display a "plus" icon when its closed and a "minus" icon when the content is displayed?
bob
Monday Oct 20, 11:04 pm

Would it be possible to add a class to the div that's put around the _slide section, so that it can be styled to be open in a print css?
(http://www.sohtanaka.com/web-design/how-to-override-inline-styles/)
Karim
Sunday Feb 08, 2:47 pm

Great script! First script that I've found practical for multiple div's. Any way to adapt this to slide elements vertically?
Dave
Wednesday May 27, 10:44 pm

I set up your script to work on multiple dynamically generated rss feeds using SimplePie. It works great on pages that have less than 50 or so items to slide, but it slows down to the point of causing a slow script warning in ie7 when there are a lot of items.

I was wondering if you could rewrite this script using the new element storage of mootools 1.2 ( http://mootools.net/blog/2008/01/22/whats-new-in-12-element-storage/ ) to speed it up and perhaps make it work on a large number of items?

Unfortunately, I am a noob and I can't even begin to figure out how to do it. Thanks for the script.
Designermonkey
Friday Aug 28, 7:24 am

Is there any way to get this to apply itself to nested elements? I'm using dd lists and have at least 7 levels nested, but can't find a script that will do what I want...

Any help would be appreciated...
Raphael
Tuesday Oct 06, 4:41 am

Hi,

This plugin corresponds perfectly to my needs.

Very good work.
emma
Tuesday Dec 01, 5:03 am

hi - great plugin! is there a way to alter the css class of the _toggle element - id like to implement a plus sign background before click, and a minus when the corresponding _slide element is open.. any ideas?

thanks again!
emma
Chris
Wednesday Dec 23, 9:49 am

How can you turn one div on and the others off so the page does not expand. I know I would have to use accordian, but I dont want to have the element right below the toggle.

Thanks in advance

Categories

Archives