[UofMCreed]

Greetings all, I am going through the accordion UI code in the jQuery library and I am having a real difficult time figuring out my issue. Basically, I want to set its max height dynamically given the size of the page. For instance if I were to open an element of the accordion and the content would normally make you scroll down the page to view the data, I would instead want it to make the entire accordion to stay on the the page and only scroll in the element itself to see more data if need be. The scrolling inside the elements is already there by default, so the height issue what is killing me at the moment.

I did some google searches, some seemed to have the answer, but none did. I have everything done with the accordion except for this little pesky bug.

<div id="accordion" >
	<h3><a href="#">Users</a></h3>
	<div id="users">
		<p>This is the area to populate the users for a specific room.</p>

        <ul>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            <li>User Information</li>
            
        </ul>

	</div>
	<h3><a href="#">Favorites</a></h3>
	<div>
		<p>This will list the favorites for the current user.</p>
	</div>
</div>

This is the HTML code for the accordian, right now this is all just placeholder data until the issue is resolved

<script type="text/javascript">
	    $(function () {
	        $("#accordion").accordion({
	            collapsible: true,
	            autoHeight: false
                
	        });
	    });
	</script>   

script inside the HTML

.ui-accordion { height: 50%; width: 29%; float: right; margin-top: 65px; }
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }

and this final piece is the css

The code I am using is in the no-auto-height.html demo if there is code that I should have put in this post. If anything is unclear please let me know. Would appreciate any help or a point in the right direction. Thanks!

NOTE: I'm still in the process of learning JS and CSS

[rajesh.kakawat]

have you added jquery and jquery UI js file in your html