Сделать видимый / невидимый div при нажатии на другой div

Question

Кто-нибудь может мне помочь, мне нужно что-то вроде http://web-kreation.com/demos/login_form_mootools_1.2/, просто проще, когда я нажимаю на один div (логин в этом случае) просто чтобы показать другой, и если я нажимаю снова сделать невидимым. Как это сделать с Mootools, если у меня есть два div ( div id=login и div id=vis_unvis)?

Answer 1

Пожалуйста, обратитесь к следующей ветке, чтобы узнать больше о том, как переключать видимость элемента с помощью JavaScript:

Переключить видимость - показать / скрыть все

Answer 2

Чтобы воспроизвести эффект в примере на самом простом, посмотрите на эту скрипку:

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");
        }
    });
})();

с html из:

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

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

и CSS из:

#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;
}

ресурсы для mootools: Fx.Morph или прототип элемента .morph() позволяет анимировать свойства элемента, в этом случае изменяя marginTop и opacity.

mootools также поддерживает Fx.Slide, Fx.Reveal и другие как часть официальной коллекции плагинов mootools-more.

конечно, чтобы скрыть / показать, вы могли бы просто toggleClass класс CSS, который имеет display: none на элемент или используйте .show() / .hide() или .fade("in") / .fade("out") скрыть через непрозрачность.

Нет конца способам справиться с этим. Проверьте Fx.Move тоже:)