Friday, April 23, 2010

jQuery: Collaps and expandable panel

Live demo: GO

How it works:
1. Load jquery.js from directory
2. Create flip, panel and contents with help of CSS
3. Now, this is the flow.
i - By clicking p element with class="bar", it will
#collapse/expand the next div with class="content">> this is using slideToggle() and next()
#change clicked bar text value to "show/hide"(depends on panel state) >> using .html()

To view source code, simply right click in browser and select view source code. This demo is built by utilizing slideToggle() function in jQuery.

No comments:

Post a Comment

Your comment is much appreciated. Thanks :)