jquery - Div height dynamically -

i have html code:

<div id="container">     <div id="feedbackbox"></div>    </div>

the #feedbackbox div doesn't appear in, initially.

the css centralize div:

#container {     position: absolute; width: 380px; height: 360px; left: 50%; top:50%; padding: 30px;     margin-left: -220px; margin-top: -210px;  }

but need change height of #feedbackbox via jquery.

i tested , doesn't work:

.expandinfo {     height: 500px;     margin-top: -221px; }  $("#container").removeclass().addclass('expandinfo');

but doesn't work! css class doesn't apply, less has been re-done (the calculation) div remains centralized.

the height not change, because of different selector priorities. (http://www.w3.org/wiki/css/training/priority_level_of_selector)

you set height #container by id. height .expandinfo defined by class. in css id-selector has higher priority class-selector.

try that:

#container.expandinfo {     height: 500px;     margin-top: -221px; }

this selector has id priority and class priority. override height of #container

Shashtri