Make visible/unvisible div on click on other div

Question

Can anybody help me, I need something like http://web-kreation.com/demos/login_form_mootools_1.2/, just mush simpler, when I click on one div ( login in this case) just to show other and if I click again to make unvisible. How to do that with Mootools if I have two divs ( div id=login and div id=vis_unvis) ?

Answer 1

Please refer to the following thread to learn more how toggle element’s visibility via the javascript:

Toggle Visibility - Show/Hide Anything

Answer 2

to replicate the effect in the example to it's most basic, look at this fiddle:

http://jsfiddle.net/dimitar/9Syj3/

(function() {
    var loginOpen = false, loginForm = document.id("login").set("morph", {
        link: "chain"
    }).setOpacity(0);

    document.id("toggler").addEvents({
        click: function() {
            loginForm.morph((loginOpen) ? {
                marginTop: -90,
                opacity: 0
            } : {
                marginTop: 0,
                opacity: 1
            });
            loginOpen = !loginOpen;            
            this.set("text", loginOpen ? "Hide form" : "Show form");
        }
    });
})();

with html of:

<div id="login">
This be the login form
</div>

<div id="toggler">Show form</div>

and css of:

#login {
    width: 300px;
    background: #ccc;
    height: 50px;
    padding: 10px;
    position: absolute;
    margin-top: -90px;
    margin-left: 300px;
    z-index: 1000;
    -moz-box-shadow: 0 0px 3px 3px #000;
}

resources for mootools: Fx.Morph or the element prototype .morph() allows you to animate properties of an element, in this case modifying marginTop and opacity.

mootools also supports Fx.Slide, Fx.Reveal and more as part of the mootools-more official collection of plugins.

of course to hide/show, you could just toggleClass a css class which has display: none on the element or use .show() / .hide() or .fade("in") / .fade("out") to hide via opacity.

NO end to ways to handle this. Check Fx.Move too :)