JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.3.0/build/cssreset/reset-min.css&3.3.0/build/cssfonts/fonts-min.css&gallery-2011.03.23-22-20/build/gallery-accordion/assets/skins/sam/gallery-accordion.css">
<div class="main">
<div id="acc_container" class="acc_container">
<div id="acc1" class="yui3-accordion">
<div id="item5" class="yui3-accordion-item" data-contentheight="stretch">
<div class="yui3-widget-hd">
<a class="yui3-accordion-item-icon"></a>
<a class="yui3-accordion-item-label">Changelog</a>
<div class="yui3-accordion-item-icons">
<a class="yui3-accordion-item-iconalwaysvisible"></a>
<a class="yui3-accordion-item-iconexpanded"></a>
<a class="yui3-accordion-item-iconclose yui3-accordion-item-iconclose-hidden"></a>
</div>
</div>
<div id="bodyid3" class="yui3-widget-bd">
<div id="pm3" style="position:relative; overflow:auto; height:100%;">
<p>
<a href="../3.3.0_1.14/index.html">20.03.2011 - ver. 1.14</a><br>
- The developer may prevent the action which follows 'itemChosen' event (expanding, collapsing, closing, etc.) by preventing the default function, bound to this event.
</p>
<hr>
<p>
<a href="../3.3.0_1.12/index.html">03.01.2011 - ver. 1.12</a><br>
- Closing an item can be prevented.<br>
...
CSS
html, body {
height:100%;
background-color: #F2FBFF;
}
h1 {
font-size: 170%;
font-weight:bold;
line-height: 130%;
margin:0 0 0 0px;
padding: 1em 0.5em 1em;
}
h2 {
font-size:150%;
font-weight:bold;
margin:1.5em 0 0;
top:0;
}
h3 {
font-size:130%;
font-weight:bold;
margin:1.5em 0 0;
top:0;
}
h4 {
font-size:110%;
font-weight:bold;
margin:0.6em 0 0;
top:0;
}
li {
list-style-type:disc;
margin:0 0 0 30px;
padding:0;
line-height: 1.4em;
}
p {
line-height: 1.6em;
}
a {
text-decoration:none;
}
a:link, a:visited {
color: #0065B5;
}
a:hover {
color: #FF6600;
}
.main {
position: relative;
margin: auto;
padding: 1em 1em 2em 1em;
height: 1000%;
width: 500px;
}
.acc_container {
top: 50px;
position: relative;
width: 450px;
height: 10%;
}
JavaScript
YUI({
gallery: 'gallery-2011.03.23-22-20'
}).use('dd-constrain', 'dd-proxy', 'dd-drop', 'gallery-accordion', function(Y) {
var accordion;
accordion = new Y.Accordion({
srcNode: "#acc1",
useAnimation: true,
reorderItems: true
});
accordion.render();
});