javascript - Expand/Collapse a div element? -


i want show content box (say div) specified height default. there link "more/less" @ bottom when clicked, want show full content of content box. "more" name of link change "less". please give hint. possible in yui or better if standalone js?

the anim module in yui provides need. if here @ reversing animation example shows how that. here source that.

<div id="demo" class="yui3-module"> <div class="yui3-hd">     <h3>reversing animation</h3> </div> <div class="yui3-bd">     <p>click icon in header toggle element's height.</p> </div> </div> <p>this placeholder text used demonstrate how above animation affects subsequent content.</p>    <script type="text/javascript">type="text/javascript"> yui().use('anim', function(y) { var module = y.one('#demo');  // add fx plugin module body var content = module.one('.yui3-bd').plug(y.plugin.nodefx, {     from: { height: 0 },     to: {         height: function(node) { // dynamic in case of change             return node.get('scrollheight'); // expanded height (offsetheight may zero)         }     },      easing: y.easing.easeout,     duration: 0.5 });  var onclick = function(e) {     e.preventdefault();     module.toggleclass('yui3-closed');     content.fx.set('reverse', !content.fx.get('reverse')); // toggle reverse      content.fx.run(); };  // use dynamic control dynamic behavior var control = y.node.create(     '<a title="collapse/expand element" class="yui3-toggle">' +         '<em>toggle</em>' +     '</a>' );  // append dynamic control header section module.one('.yui3-hd').appendchild(control); control.on('click', onclick);  }); </script> 

Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -