Using for each in mootools

[websam]

Hi there,

I have the following div setup in my html :

<div id="container">
<div class="toggle"></div>
<div class="content">
Some content . . . . .
</div>
<div class="toggle"></div>
<div class="content">
Some content . . . . .
</div>
<div class="toggle"></div>
<div class="content">
Some content . . . . .
</div>
</div>

Now i want to take all div's with class="toggle" and add a event
handler to them in window.addEvent(), but i'm quite new to the
mootools library and don't know how to make that.

Can someone help me getting this done using mootools ?

[CroNiX]

window.addEvent('domready', function(){ //make sure dom elements are
loaded first
$$('.toggle').each(function(el){
el.addEvent('click', function(e){
e = new Event(e).stop(); //use this to prevent default
click action like on a link if needed
//your click event function here
});
});
});

[tr0y]

This may also be useful either to use or as an example.

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();
});

This will automatically add the click event and a toggle if you create
a set up like this:

<div class="instructions_toggle">click to toggle</div>
<div class="instructions_slide">Here is some content that will toggle</
div>

Just add the suffix _toggle to any element that you want to be the
control and _slide for the content

[batman42ca]

If you are planning to write some code so that clicking the "toggle"
elements, will hide or reveal the "content" elements, you might save
yourself some effort if you use the mootools accordion class. It's
designed for what it looks like you are about to write for yourself.

[websam]

CroNiX >> Your example works just like a charm ;o) However my next
question was, how can i make the "content" div's toggable and that got
answered by tr0y


tr0y >> Is it possible to make this working on id="" instead of
class="" as i use the class to define the CSS styles on the elements.
And is it possible to set style display:block/none because i don't
like to change the id="" on an element ?


batman42ca >> I have been looking at the accordion FX, but the
accordion only allows to have one element open at the time, and as i
know that i'm going to have more than one open at a time i was looking
for another solution.

[websam]

Hi again,

I did the following :

var toggleDiv = function() {
var toggleAll = $(document.body).getElements('div[id$=_toggle]');

toggleAll.each(function(item){
item.setStyle('cursor', 'pointer');

var toggleAllId = item.getProperty('id');
toggleAllId = toggleAllId.replace("_toggle", "");
var slideAllId = toggleAllId + "_element";
var slideAll = $(document.body).getElements('div[id$='+
slideAllId +']');

slideAll.slide('hide');
$(item).addEvent('click', function(){
slideAll.slide();
});
});
}

window.addEvent('domready', function() {

toggleDiv();
});

And now it works using the id's instad of the class

Thansk for your help on this matter ;o)

[tr0y]

Awesome, glad it worked out. The only reason I have classes for the
toggle is because the way it was set up allows a single control to
toggle multiple elements. Been meaning to switch that over so that id
works for toggle and class works for the toggle elements.