Next »
1565/1956
« Previous

Customize accordion title bar and content in JavaScript

Description

The following code shows how to customize accordion title bar and content.

Example


<html>
<head>
<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" />
<!-- w  w  w. j a v a 2 s  .  c o  m-->

<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>

Click to view the demo

The code above generates the following result.

Customize accordion title bar and content in JavaScript
Next »
« Previous