Expanding and Collapsing Div via Jquery & CSS

[tusharbhatia]

I have seen similar questions asked before, however my question is a little bit different to the other ones that have previously been asked.

I want to make the div's expand/collapse on the jquery "click function" I have created. The difference between my question and other questions is the fact that I need to keep the maximum size at "120px" for the div's while they are in their "collapsed" state, and then need the height to be "100%" when it is in the "expanded" state.

Each parent div (i.e. div id = "1") is dynamically created from the SQL database depending on the query which is all handled elsewhere. There will be multiple of these div's on one page (again, depending on the query of the user).

Here is a jsfiddle URL to my code so far: http://jsfiddle.net/m22Gu/17/

Thank you for your time and patience and for helping me out, I'd really appreciate any answers.

[drjohn]

If you visit my www.ukfolkfestivals.co.uk site, on the country pages you will see some expanding/collapsing divs. You can copy the code (I got it from another site which gave it away free). Look for accordian.js. It uses two divs - accordianButton and accordianContent. It was originally written as a menu but is quite adaptable as you can see.

Then just apply css to get the expanded and collapsed sizes you want in the two states. the script applies two classes - "on" and "over" - which are the ones you will style.

Use a class, not an id if you want multiple divs of the same type. An id is supposed to apply to some unique item on the page eg a wrapper div or header div usually get an id as they are the only ones with that name. Also, ids can't start with a number.