Next »
1759/1956
« Previous

Set tab to be not always Open and not auto Height in JavaScript

Description

The following code shows how to set tab to be not always Open and not auto Height.

Example


<!--  w ww  . java 2s  . c  o  m-->
<!doctype html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<script type="text/javascript">
$(function() {

//configure accordion
var accOpts = {
event:"mouseover",
active:"#header3",
alwaysOpen:false,
autoHeight:false
};

//turn specified element into an accordion
$("#myAccordion").accordion(accOpts);

});
</script>
</head>
<body>

<div id="myAccordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>P1</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>P2</p>
</div>
<h3><a id="header3" href="#">Section 3</a></h3>
<div>
<p>P3</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>P4</p>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Set tab to be not always Open and not auto Height in JavaScript
Next »
« Previous