Increasing height of a div while dynamically loading content...

Question

I have a div which contains an unordered list... After some user actions i load the div with a longer list i.e. containing more list items than the previous one. I use jquery's higher level ajax functions to do this.

The problem is when i load it through ajax the list elements overflow the div's bottom portion and some of them get's displayed out of the div.

I haven't set any heights for the containing div assuming that it will expand to accomodate any future longer lists. I'll post the code below and will be extremely grateful if someone figures this out....

#sidebar1 {
        float: left;
        width: 15%; /* since this element is floated, a width must be given */
        background: #FFE8BF; /* the background color will be displayed for the length of the content in the column, but no further */
        padding: 15px 0; /* top and bottom padding create visual space within this div  */
        text-align:center;
    }

    <div id="sidebar1">

                    <div class="sidebarmenu">

                     <ul id="sidebarmenu1">
                            <li>
                                <a href="#" id="loadHotel" >
                                    HOTEL
                                </a>
                            </li>
                            <li>
                                <a href="#" id="loadCountry">
                                    COUNTRY
                                </a>
                            </li>

                            <li>
                                <a href="#" id="loadCity">
                                    CITY
                                </a>
                            </li>


                        </ul>
                    </div>

                </div>  <!-- end #sidebar1 -->

I load the list elements into the <ul id = "sidebarmenu1"> Hope i'm clear... Thanks a lot in advance....

Answer 1

have you tried:

$('ul#sidebarmenu1').removeClass('class here').AddClass('class here');

that should work

Answer 2

Figured out a workaround for the curvy corner problem...!!!

after i load the menu items with ajax, i use jquery to increase the height of the div and then call curvy corners to round the edges...!

Voila..!!!!