mootools changing an elements inline css

Question

I have some HTML that looks like this,

<div id="mb_contents" style="visibility: visible; opacity: 1; width: 600px; height: 450px;">

I am trying to turn the visibilty to hidden using this js/mootools,

$('mb_overlay').set('styles', {
            'visibilty': 'hidden',
        });

However nothing seems to be working, am I missing something?

Answer 1

There's a method called setStyle. In your case you'd use it like this:

$('mb_overlay').setStyle('visibility', 'hidden');

I think what you are actually doing with your code is setting an attribute called styles, which doesn't really exist.

Answer 2

You've misspelled "visibility"

This works just fine:

$('mb_contents').set('styles', {
    'visibility': 'hidden'
});