Copy codeThe Code is as follows:
// Jquery implements the accordion Effect
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> accordion </title>
<Script type = "text/javascript" language = "javascript" src = "jquery-1.7.1.min.js">
</Script>
<Script type = "text/javascript" language = "javascript" src = "jquery-ui-1.8.18.custom.min.js">
</Script>
<Link rel = "stylesheet" href = "ui-lightness/jquery-ui-1.8.18.custom.css"/>
<Script type = "text/javascript" language = "javascript">
$ (Function (){
$ ("# Accordion"). accordion (
{
Header: "h3 ",
Event: "mouseover ",
Icons :{
Header: "ui-icon-carat-2-e-w"
},
}
). Sortable ({
Axis: "Y" // drag up or down. The default value is left or right.
});
})
</Script>
</Head>
<Body>
<Div id = "accordion" style = "width: 600px; height: 600px; border: 1px # F00 solid">
<Div>
<H3> <a href = "#"> first </a> <Div> Lorem ipsum dolor sit amet. </div>
</Div>
<Div>
<H3> <a href = "#"> second </a> <Div> Phasellus mattis tincidunt nibh. </div>
</Div>
<Div>
<H3> <a href = "#"> third </a> <Div> youyou </div>
</Div>
</Div>
</Body>
</Html>