<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
$("#accordion").accordion({ header: "h3",
autoheight: false,
active: false,
alwaysOpen: false,
fillspace: false,
collapsible: true,
//heightStyle: content //auto, fill, content
});
});
</script>
<STYLE>
.ui-helper-hidden {
display: none;
}
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.ui-accordion .ui-accordion-header {
display: block;
cursor: pointer;
position: relative;
margin-top: 2px;
padding: .5em .5em .5em .7em;
min-height: 0; /* support: IE7 */
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
position: absolute;
left: .5em;
top: 50%;
margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
padding: 1em 2.2em;
border-top: 0;
overflow: auto;
}
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: 14PX;
}
.ui-widget .ui-widget {
font-size: 1em;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius: 6px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius: 6px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: 6px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius: 6px;
}
/* COLORS */
/* TITLE REST STATE */
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #000;
background: ;
font-weight: normal;
color: ;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
color: ;
text-decoration: none;
}
.ui-state-default a:hover {
color: ;
text-decoration: none;
}
/* TITLE ACTIVE STATE */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
border: 1px solid #000;
background: ;
color: ;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
color: ;
text-decoration: none;
}
/* CONTENT AREA */
.ui-widget-content {
border: 1px solid #000;
background: ;
color: ;
}
.ui-widget-content a {
color: ;
text-decoration:none;
}
.ui-widget-content a:hover {
color: ;
text-decoration:none;
}
</STYLE>
<!-- begin html for accordion -->
<div style="width: px;">
<div id="accordion">
<h3>
<a href="#">Title 01</a></h3>
<div class="">
Content 01
</div>
<h3>
<a href="#">Title 02</a></h3>
<div class="">
Content 02
</div>
<h3>
<a href="#">Title 03</a></h3>
<div class="">
Content 03
</div>
<h3>
<a href="#">Title 04</a></h3>
<div class="">
Content 04
</div>
<h3>
<a href="#">Title 05</a></h3>
<div class="">
Content 05
</div>
</div>
<!-- end html for accordion -->