<html>
<head>
<script type='text/javascript' src='js/jquery-1.3.2.js'></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.accordion.js"></script>
<script type='text/javascript'>
$(document).ready(
function() {
$('ul').accordion({
fillSpace: true,
event: 'mouseover',
active: 'h4.tmpSelected',
header: 'h4'
});
}
);
</script>
<style type='text/css'>
ul {
list-style: none;
margin: 0;
padding: 15px 5px;
}
ul h4,
ul p {
margin: 5px;
}
li {
background: gray;
padding: 3px;
width: 244px;
margin: 1px;
}
</style>
</head>
<body>
<ul>
<li>
<h4>A</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum luctus rutrum orci.
</p>
</li>
<li>
<h4>B</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum luctus rutrum orci. Praesent faucibus tellus
faucibus quam. Aliquam erat volutpat. Nam posuere. Aliquam
erat volutpat. Etiam at lacus fermentum dui interdum pretium.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
</li>
<li>
<h4 class='tmpSelected'>C</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum luctus rutrum orci. Praesent faucibus tellus
faucibus quam. Aliquam erat volutpat. Nam posuere.
</p>
</li>
<li>
<h4>D</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum luctus rutrum orci. Praesent faucibus tellus
faucibus quam. Aliquam erat volutpat. Nam posuere.
</p>
</li>
</ul>
</body>
</html>
|