v0.2
Update: Toggle-o-matic no longer works with the current version of mootools and is not being updated at this time. Thanks for all the feedback on this project.
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.
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.
Tags: free download, interface design, javascript, mootools, mootools plugins
Thanks for this great script. It’s exactly what I needed!
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
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.
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?
If you have a link with a working example, I can take a look.
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?
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.
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
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.
Great function.
One thing though, I love the blog, but the navigation is a little too addictive!
Thanks for the clarification Troy, and thanks for posting this code, it’s cleaned up mine a heap!
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?
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/)
Great script! First script that I’ve found practical for multiple div’s. Any way to adapt this to slide elements vertically?
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.
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…
Hi,
This plugin corresponds perfectly to my needs.
Very good work.
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
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