Always close current div regardless of which trigger you click

Question

How is it possible to close a div that's currently open when you click on its trigger that usely opens the div or any other trigger (that opens a different event on the page)?

So basicaly I have two links: Login and Register. When you click Register, the Login block/div disappears and the Register div shows up. When I hit Login, the Register div hides and the Login div shows up.

Also when I, e.g. click Login and the Login div is already shown - the Login div must hide aswell.

How do I accomplish this? I tried for days now, but unfortunately i'm a beginner to jQuery and my skills in jQuery aren't great at the moment. I made the following script that works. I only can hide/show divs when you click the same trigger. If you click Register AND Login the divs will just show up on top of eachother, without the hiding.

;(function($) {
var $jq = jQuery.noConflict();
$jq.fn.login_switch = function(options) {
    var o = $jq.extend({}, $jq.fn.login_switch.defaults, options);
    var $this = $jq(this);

  $jq(this).click(function(e) 
  {  
      e.preventDefault(); 
    // hides matched elements if shown, shows if hidden 
    $jq(this).closest("div#wrapper").children("div#member_login").eq(0)[o.method](o.speed);

  });

};
$jq.fn.reg_switch = function(options) {
    var o = $jq.extend({}, $jq.fn.reg_switch.defaults, options);
    var $this = $jq(this);

  $jq(this).click(function(e) 
  {  
      e.preventDefault(); 
    // hides matched elements if shown, shows if hidden 
    $jq(this).closest("div#wrapper").children("div#member_reg").eq(0)[o.method](o.speed);
  });

};
$jq.fn.login_switch.defaults = {
    speed : "slow",
    method: "slideFadeToggle"
};
$jq("a.log-expand").login_switch();

$jq.fn.reg_switch.defaults = {
    speed : "slow",
    method: "slideFadeToggle"
};
$jq("a.reg-expand").reg_switch();


var msie = false;
if(typeof window.attachEvent != 'undefined') { msie = true; }

$jq.fn.slideFadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, function() { 
    if (msie) { this.style.removeAttribute('filter'); }
    if (jQuery.isFunction(callback)) { callback(); }
  }); 
};

};
})(jQuery);

My html is:

    <div id="member_reg" style="display:none;">
        <div class="container">
            <div class="sixteen columns">
            REGISTRATION.
            </div>
        </div>
    </div>
    <div id="member_login" style="display:none;">
        <div class="container">
            <div class="sixteen columns">
                LOGIN.
            </div>
        </div>
    </div>

with the trigger buttons:

<ul class="user">
<li><a href="javascript:void(0);" class="reg-expand register">Register</a></li>
<li><a href="javascript:void(0);" class="log-expand login">Login</a></li>
</ul>

Answer 1

Here I have created a FIDDLE for you with the behavior I think you are trying to achieve.

Let me know if you have any questions or if I'm way off base.

HTML

<button id="btnLogin" data-bound="login">Login</button><button id="btnRegister" data-bound="register">Register</button>

<hr />

<div id="login" class="area" data-state="closed">
    Login div
</div>

<div id="register" class="area" data-state="closed">
    Register div
</div>

CSS

.area{
    float:left;
    width:200px;
    height:0;
    margin:10px;
    overflow:hidden;
    text-align:center;
    line-height:100px;
}
#login{
    background:#41cc36;
}
#register{
    background:#3764e3;
}

JAVASCRIPT

$(document).ready(function(){
    $('button').bind('click', function(){
        //close any open areas
        $('.area').each(function(){
            if($(this).data('state') == 'open'){
                $(this).animate({'height': 0}, 750, function(){
                    $(this).data('state', 'closed');
                });
            }
        });
        //retrieve the div we need to toggle and it's state
        var divID = $(this).data('bound'),
            div = $('#' + divID),
            state = div.data('state');
        //animate the div based on it's state, then set the new state
        if(state == 'closed'){
            div.animate({'height': 100}, 750, function(){
                div.data('state', 'open');
            });            
        }else{
            div.animate({'height': 0}, 750, function(){
                div.data('state', 'closed');
            });
        }
    });

    //init
    $('#btnLogin').trigger('click');
});