Filling the height of its container
If the heightStyle
option is set, it will force the accordion to take the full height of its container. In our examples so far, the container of the accordion has been the body of the page, and the height of the body will only be the height of its largest element. We'll need to use a new container element with a fixed height to see this option in action.
In the <head>
element of accordion5.html
, add the following <style>
element:
<style> #container { height: 600px; width: 400px; } </style>
Then wrap all of the underlying markup for the accordion in a new container element as follows:
<div id="container">
<div id="myAccordion">
<h2><a href="#">Header 1</a></h2>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae felis quis diam laoreet ullam corper.</div>
<h2>...