Yui3 Transitions to hide and show a div

Question

I have the following snippet:

YUI().use('transition', 'node-event-delegate', function(Y) {
        var button = Y.one('#subscribe');
        var close = Y.one('#close');

        function open (e) {
            var node = Y.one('#popup-subscribe');
            node.show(true);
        }
        button.on('click', open);

        function closeIt (e) {
            var node = Y.one('#popup-subscribe');
            node.hide(true);
        }
        close.on('click', closeIt);
    });

But when I test it and click on close for example I get this error message:

node.hide is not a function

node.hide(true);

Any idea why?

Answer 1

You may have to show us your HTML because with the right javascript includes and appropriate HTML, it works fine here: http://jsfiddle.net/jfriend00/27fJW/ . So, I would suspect that you either don't have the right HTML or you don't have the right core YUI includes.

HTML I made up to match the code:

<script src="http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js"></script>

<button id="subscribe">Open</button>
<button id="close">Close</button>

<div id="popup-subscribe">Popup content</div>

Your code (unchanged):

YUI().use('transition', 'node-event-delegate', function(Y) {
    var button = Y.one('#subscribe');
    var close = Y.one('#close');

    function open (e) {
        var node = Y.one('#popup-subscribe');
        node.show(true);
    }
    button.on('click', open);

    function closeIt (e) {
        var node = Y.one('#popup-subscribe');
        node.hide(true);
    }
    close.on('click', closeIt);
});​