How do I use Scriptaculous's Effect.Morph to turn off a class?

Question

Scriptaculous's Effect.Morph can take a CSS class and apply it over a period of time. I have a div which expands when a button is clicked, so it uses Effect.Morph to apply an .expanded class.

Now I'd like to remove the .expanded class on a second click, toggling the div closed again. How can I invoke Effect.Morph to do that?

Answer 1

The documentation says this about Effect.Morph:

This effect changes the CSS properties of an element.

So you would need to call it again, specifying the initial CSS properties so your div can revert back to its initial state, for example (again, from the docs):

<div id="morph_demo" style="background:#cccccc; width:100px; height:100px;"></div>
<ul>
  <li><a href="#" onclick="$('morph_demo').morph('background:#00ff00; width:300px;'); return false;">Click me for a demo!</a></li>
  <li><a href="#" onclick="$('morph_demo').morph('background:#cccccc; width:100px;'); return false;" >Reset the demo!</a></li>
</ul>

Alternatively, you could use Prototype to remove the class altogether:

$('yourDivId').removeClassName('yourClassId');

Scriptaculous depends on Prototype.js, in case you weren't aware, so the second option is a viable one.

Finally, you can set the style to nothing (I think):

$('yourDivId').setStyle(null);