javascript - div 要素を展開/折りたたみますか?

Question

デフォルトで指定された高さまでのみコンテンツボックス（divなど）を表示したい。下部に「More/Less」のようなリンクがあり、クリックするとコンテンツ ボックスの全コンテンツを表示したいと考えています。次に、リンクの「more」名が「less」に変わります。ヒントをください。スタンドアロンの JS の場合、YUI またはそれ以上で行うことは可能ですか?

Answer 1

YUI の Anim モジュールは、必要なものを提供します。ここで反転 アニメーションの例を見ると、それを行う方法が示されています。そこからのソースです。

<div id="demo" class="yui3-module">
<div class="yui3-hd">
    <h3>Reversing an Animation</h3>
</div>
<div class="yui3-bd">
    <p>Click the icon in the header to toggle the element's height.</p>
</div>
</div>
<p>This is placeholder text used to demonstrate how the 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 to 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'); // get expanded height (offsetHeight may be 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 for dynamic behavior
var control = Y.Node.create(
    '<a title="collapse/expand element" class="yui3-toggle">' +
        '<em>toggle</em>' +
    '</a>'
);

// append dynamic control to header section
module.one('.yui3-hd').appendChild(control);
control.on('click', onClick);

});
</script>

Answer 2

プラグインを使用できますjQuery More/Less。美しいプラグインです

ここを見る