Toggling CSS Properties with the GX JavaScript Animation Framework
In this ninth episode of the series, I provide you with some comprehensive examples that show how to toggle different properties of a sample div by using the core “gx()” method of the GX library. As with many tasks the GX JavaScript animation framework can be made to perform, toggling animations is a very simple process.
Toggling CSS Properties with the GX JavaScript Animation Framework - Dynamically expanding and contracting an HTML element (Page 3 of 4 )
In reality, toggling the value assigned to the height of a div doesn't differ too much from doing the same to its width. It only requires passing the key “height” to the pertinent “gx()” method, followed by the string “toggle” and nothing else.
Nevertheless, the easiest way to demonstrate how to implement this specific effect is through a concrete example. Thus, below I coded another code snippet, which will alternately expand and contract the height of the target div each time the element is clicked. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="content">
<h2>Toggling the width of the targeted element</h2>
<div id="container">
<p>This container will be animated via the GX animation library. For more information on GX, please click <a href="http://gx.riccardodegni.net/">here</a>.</p>
</div>
</div>
<div id="footer">
<h2>Footer section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</body>
</html>
In truth, toggling the height of a div of any other HTML element isn’t going to change forever the way that you develop your web pages. Even so, the previous example is useful for showing how easy it is to achieve this with the GX library. For the sake of completeness, below I included another image that depicts the most relevant states of this animation:
Well, now that you've learned how to toggle the width and height of a sample div individually, it’s time to explore a few other abilities offered by GX for implementing some simple toggling animations. So, in the last section of this tutorial I’ll be developing a final code sample, which will alternate the opacity of the same div, using the already familiar “toggle” argument.
As usual, to learn the full details of this process, click on the link below and read the lines to come.
JavaScript 
More Top jQuery Plugins for Menus
