Question

I am using the jQuery UI accordion effect and I can’t seem to size the divs correctly. I want the second one to be 900×900 to fit an embedded map. The former section only needs to be around 400 high and I’m not able to solve the problem with the CSS below.

.accordion-section{
background: #F5F5F5;
box-shadow: 3px 3px 3px #888;
border-radius: 15px;
position: relative;
margin-top: 2px;
margin-bottom: 10px;
padding: .5em .5em .5em .7em;
display: block;


}



#FIRSTACCORDIONDIV{

overflow:hidden;
    height:400px;


}

Any suggestions? Thank you!

Answer 1

You can set your accordion’s heightStyle option to content. This way, each section will only be as tall as needed to accommodate its content.

You may also want to remove the #FIRSTACCORDIONDIV rule from your CSS, so the section layouts naturally and possible content below the 400px mark cannot be missed by the user.