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.

  1. Download mootools 1.2, in my opinion, the best javascript library around.
  2. Download mootools 1.2 “more” library (which includes the FX.slide)
  3. 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)
  4. 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.

Creative Commons License
This work is dedicated to the Public Domain.

Posted in Mootools 1.2, Web Design

Tags: , , , ,

Bookmark and Share

Comments (13)
  1. Ray
    Tuesday Jul 29, 4:48 am

    Thanks for this great script. It's exactly what I needed!
  2. 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
  3. 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.
  4. 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?
  5. Troy
    Friday Sep 05, 7:31 am

    If you have a link with a working example, I can take a look.
  6. 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?
  7. 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.
  8. 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
  9. 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>
  10. 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>!
  11. 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!
  12. 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?
  13. 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/)


Leave a Reply