Togle div

yui 3.5 module

by adishardis

HTML

<link rel="stylesheet" href="http://yuilibrary.com/yui/docs/assets/anim/anim.css">
<div id="demo" class="yui3-module toggle-area">

    <div class="yui3-hd">
        <h3>Animation Demo</h3>
    </div>
    <div class="yui3-bd">
        <p>This an example of what you can do with the YUI Animation Utility.</p>
        <p><em>Follow the instructions above to see the animation in action.</em></p>
    </div>

</div>
<br>

<div id="demo2" class="yui3-module toggle-area">

    <div class="yui3-hd">
        <h3>Animation Demo</h3>
    </div>
    <div class="yui3-bd">
        <p>This an example of what you can do with the YUI Animation Utility.</p>
        <p><em>Follow the instructions above to see the animation in action.</em></p>
    </div>

</div>
<br>
<div id="demo3" class="yui3-module toggle-area">

    <div class="yui3-hd">
        <h3>Animation Demo</h3>
    </div>
    <div class="yui3-bd">
        <p>This an example of what you can do with the YUI Animation Utility.</p>
        <p><em>Follow the instructions above to see the animation in action.</em></p>
    </div>

</div>

CSS

/* color and iteration examples */
a.toggle-area {
    color:#004c6d;
    display:inline-block;


    border: 1px solid #9EA8C6;
    background: #ECEFFB;
    border-radius: 3px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
    text-decoration:none;


    
    padding:1.6em;
    text-align:center;
}

/* xy and curve examples */
span.toggle-area {
    background:#ff8800;
    display:block;
    height:10px;
    width:10px;
}

/* module examples */
div.toggle-area {
    position:relative;
    width:22em;
    overflow:hidden;
    border: 1px solid #9EA8C6;
    background: #ECEFFB;
    border-radius: 3px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
}

div.toggle-area .yui3-hd {
    background-color: #B6BFDA;
    position:relative;
    zoom:1;
}

div.toggle-area .yui3-hd h3 {
    border:0;
    color: #30418C;
    margin:0 25px 0 0;
}

.toggle-area .yui3-hd a { /* module control (close remove, etc) */
    background:url(http://yuilibrary.com/yui/docs/assets/anim/sprite.png) no-repeat;
    position: absolute;
    cursor:pointer;
    display: inline-block; /* prevent IE margin doubling */
    overflow:hidden;
    text-decoration:none;
    text-indent:9999px;
    height: 20px;
    width: 21px;
    top: 4px;
    right: 4px;
    border:solid 1px;
    border-color: #CCD1E1 #6E7BA0 #6E7BA0 #CCD1E1; 
    background-color: #97A2C4;
    border-radius: 2px;
}

.toggle-area .yui3-hd a:hover {
    background-color:#8793b8;    
}

div.toggle-area .yui3-bd {
    clear: both;
    overflow:hidden;
    zoom:1;
}

div.toggle-area .yui3-bd p {
    margin:0;
    padding:0.8em 1em 1em;
}

div.toggle-area .yui3-hd {
    margin:0;
    padding:0.5em 1em;
}

div.toggle-area .yui3-bd p em {
    font-weight:bold;
}

/* basic example */
div.toggle-area a.yui3-remove {
    background-position:0 0;  /* "X" icon */
}

.yui3-scroll .yui3-hd {
    position: relative;
}
.yui3-scroll .yui3-bd {
    height:10em;
    overflow:hidden;
}

/* reverse and easing examples */
.toggle-area a.yui3-toggle {
...

JavaScript

YUI().use('anim', function(Y) {
    
    
   Y.one('body').addClass('yui3-skin-sam');

   var togglediv  = function (module){

        var content = module.one('.yui3-bd').plug(Y.Plugin.NodeFX, {
            from: { height: 1 },
            to: {
                height: function(node) { 
                    return node.get('scrollHeight'); 
                }
            },
            
            easing: Y.Easing.easeOut,
            duration: 0.5
        });

        var onClick = function(e) {
            module.toggleClass('yui3-closed');
            content.fx.set('reverse', !content.fx.get('reverse')); 
            content.fx.run();
        };

        var control = Y.Node.create(
            '<a title="show/hide content" class="yui3-toggle">' +
                '<em>toggle</em>' +
            '</a>'
        );

        module.one('.yui3-hd').appendChild(control);
        control.on('click', onClick);
        
        return content;
    };


    var module1 = Y.one('#demo');
    var module2 = Y.one('#demo2');
    var module3 = Y.one('#demo3');
    
   var content1 = togglediv(module1);
   var content2 = togglediv(module2);
   var content3 = togglediv(module3);
    
    module1.addClass('yui3-closed');
    content1.setStyle("height", "1px");
    content1.fx.set('reverse', true);
});