Ticket #4935: accordion_test.html

File accordion_test.html, 1.6 KB (added by Panman01, October 29, 2009 07:33PM UTC)

Example code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accordion with List</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
	$('.atest').accordion({ autoHeight: false });
});
</script>
</head>

<body>
<p>Below is an accordion with a list of links at the content. In IE6 the links dissapear, cause is the autoHeight option.</p>
<div class="atest">
  <h2><a href="#">Test</a></h2>
  <div>
     <ul>
       <li><a href="#">Abc</a></li>
       <li><a href="#">Abc</a></li>
       <li><a href="#">Abc</a></li>
       <li>Content</li>
       <li><a href="#">Abc</a></li>
     </ul>
  </div>
  <h2><a href="#">Test</a></h2>
  <div>
     <ul>
       <li><a href="#">Abc</a></li>
       <li><a href="#">Abc</a></li>
       <li><a href="#">Abc</a></li>
       <li><a href="#">Abc</a></li>
     </ul>
  </div>
  <h2><a href="#">Test</a></h2>
  <div>
     <ul>
       <li><a href="#">Abc</a></li>
       <li><a href="#">Abc</a></li>
       <li>Test content</li>
       <li><a href="#">Abc</a></li>
       <li><a href="#">Abc</a></li>
     </ul>
  </div>
</div>
</body>
</html>

Download in other formats:

Original Format