mootools show/hide div dependent on whether or not checkbox is checked

Question

I have a checkbox I wanting to show a fieldset in a form dependent on whether or not the checkbox is clicked or not? i.e if the checkbox is checked don't show the fieldset and if it is not show the fieldset.

My markup looks like this,

<fieldset class="toplined">
<label>Keep Image</label>
<input type="checkbox" name="update_image[]" value="1" id="toggle" checked='true'/>
</fieldset>

<fieldset class="toplined toggle_slide">
<label>Image:</label>
<input type="file" name="article_image[]">
</fieldset>

the fieldset with the class toggle_slide is the one I want to show/hide, I currently have this mootools script

$('toggle').addEvent('click', function(e){
    e = new Event(e);
    $$('.toplined toggle_slide').toggle();
    e.stop();
});

however this just results in errors.

Answer 1

try document.getElement("fieldset.toplined.toggle_slide").toggle();

Answer 2

Solution

Here is a quick solution. If you are interested or require more information on how to get this to work, read on!

$('toggle').addEvent('click', function(e){
    if(this.checked)) {
        $$('.toggle_slide').toggle();
    }
});

Events

In Mootools, all elements have the addEvent method which takes two arguments. The first argument is the type of event (e.g. click) and the second is a function to call when that event occurs. This function has an argument automatically passed to it which is the event itself. Therefore, creating a new event inside an addEvent method is a big mistake as the new event won't be the same event as that which called the addEvent method's function. You can specify the name of the default event argument in the function parameter list and then use it as normal. Consequently, in your code, e already exists, as that is what you have called the event in this piece of code: function(e){ and all the line e = new Event(e); does is overwrite this parameter with a blank default event. This is almost certainly not what you want.

Many actions occur when events happen even when JavaScript isn't present. For example, when a form is submitted, the submit event tells the browser to collect the data for that form and send it to the form's action. Another example, is when you click on a link, the click event tells the browser to follow that link. These are known as default events. However, when we have attached the addEvent method to, say, a link, we want our own actions to occur, not the browser default. We can prevent these default actions from occurring by using the stop method on event objects.

Since e is your event object, e.stop() will prevent any default actions from occurring. However, in this case, the default action for a click event on a checkbox is to check or uncheck that checkbox. e.stop() may prevent this from happening (I haven't tested it) but at best will do absolutely nothing. Therefore, it will either confuse your users or do nothing so I suggest you remove it.

Finally, in an addEvent function, you can use the this keyword to refer to the element which the event is attached to.

Selectors

Mootools has a very advanced selector system which allows you to select almost anything you want. You need to select your fieldset which has two classes. However, the selector you have chosen, $$('.toplined toggle_slide'), says "Find elements with the class toplined and then inside that element, find elements with the tag toggle_slide". Instead you should use $$('.toggle_slide')

Elements

You can detect whether or not a checkbox is checked with the checked property. This will return true if a checkbox is checked and false otherwise. In your case, because the checkbox is the element you are adding the event to, you can use this.checked to determine whether or not it is checked.

Tip: If you are using Firebug, you can you use console.log to print in the console any element. This will display all the properties and methods possessed by that element at that point in time. This will reveal to you stuff like checked pretty quickly.

Additionally, Mootools is split into two components, Mootools core and Mootools more. The toggle method is only defined on Elements if you have Element.Shortcuts included from Mootools more or if you have written that method yourself. Otherwise you will get an error.