Skip to content

Instantly share code, notes, and snippets.

@joacim-boive

joacim-boive/Default Collapse?

Created January 5, 2011 09:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joacim-boive/766103 to your computer and use it in GitHub Desktop.
Save joacim-boive/766103 to your computer and use it in GitHub Desktop.
Download ZIP
YUI Accordion
Raw
Default Collapse?
<!doctype html>
<html>
<head>
<meta charset=utf-8/>
<title>YUI Plugin: gallery-node-accordion </title>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/combo?3.2.0/build/cssfonts/fonts-min.css&3.2.0/build/cssreset/reset-min.css&3.2.0/build/cssbase/base-min.css">
<link type="text/css" rel="stylesheet"
href="http://yui.yahooapis.com/gallery-2010.05.21-18-16/build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion.css"/>
<style>
body, ul, li {
margin: 0;
padding: 0;
}
#wrapper {
margin: 20px;
}
.yui3-accordion .yui3-accordion-item {
text-align: left;
}
.yui3-accordion .yui3-accordion-item .yui3-accordion-item-bd p {
padding: 5px;
}
.txt-frags .yui3-accordion-item-hd{
background-position: 0 -1300px!important;
}
ul {
width: 300px;
}
li {
margin: 0 0 10px;
}
ul.txt-frags li {
list-style-type: none;
}
ul.txt-frags a{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
a strong{
color: #19005D;
}
</style>
</head>
<body class="yui3-skin-sam">
<div id="wrapper">
<ul class="txt-frags">
<li>
<div class="yui3-accordion">
<div class="yui3-module yui3-accordion-item yui3-accordion-item-active first-of-type">
<div class="yui3-hd yui3-accordion-item-hd">
<a href="#" class="yui3-accordion-item-trigger"><strong>Låååååååååååååååååååååååååååååång Rubrrrrrrrrrrrrrrrrrrrrrrrrik</strong></a>
</div>
<div class="yui3-bd yui3-accordion-item-bd">
<p>
Här är det tänkt att det ska stå ett utkast om vad den här paragrafen handlar om.
</p>
</div>
</div>
</div>
</li>
<li>
<div class="yui3-accordion">
<div class="yui3-module yui3-accordion-item yui3-accordion-item-active">
<div class="yui3-hd yui3-accordion-item-hd">
<a href="#" class="yui3-accordion-item-trigger"><strong>Paragraf rubrik 1</strong></a>
</div>
<div class="yui3-bd yui3-accordion-item-bd">
<p>
Här är det tänkt att det ska stå ett utkast om vad den här paragrafen handlar om.
</p>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- YUI 3 Seed //-->
<script type="text/javascript" src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
<!-- Initialization process //-->
<script type="text/javascript">
YUI({}).use('anim', 'gallery-node-accordion', function (Y) {
Y.all(".yui3-accordion").plug(Y.Plugin.NodeAccordion, {
anim: Y.Easing.backIn
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment