Question

I want to run a toggle function for 2 selectors. I have an element with class .rgstr and another one with class .disable which are my selectors.

Here is my code:

$(document).ready(function(){
    $('.rgstr, .disable').click(function() {
        var clicks = $(this).data('clicks');

        if (!clicks) {
            $('.loginpanel').animate({ right: "0"}, 300, function() {
                $('.lgnreg > div').stop().animate({right:"0"},1200,'easeOutExpo');
            });
            $('.disable').css("display","block");
        } 
        else {
            $('.loginpanel').animate({ right: "-300px" }, 250, 'easeInOutCirc', function() {
                $('.lgnreg > div').stop().animate({right:"-25px"},250,'easeInOutCirc');
            });
            $('.disable').css("display","none");
        }
        $(this).data("clicks", !clicks);
    });
});

HTML :

<div class="disable"></div>
<div class="rgstr">
    <a href="#">Login/Register</a >
</div>
<div class="loginpanel">
<div class="lgnreg">
    <div class="login">
        <form>
            <input type="text" name="lgnusername" id="lgnusername" value="Username" />
            <input type="text" name="lgnpassword" id="lgnpassword" value="Password" />
            <input type="submit" name="submit" id="submit" value="Login" />
        </form>
    </div>

    </div>
</div>

I want when the .rgstr is clicked, .loginpanel be opened and then when we click on .disable, be closed. Now it works, but with 2 clicks. First time I click on .rgstr the .loginpanel gets opened, but then I have to click twice on .disable to close .loginpanel, and same for the next times. How can I fix this?

Answer 1

Your 'clicks' data element is only on the element you clicked on, not on both elements.

So, when you click on .rgstr, only it’s data is updated, not .disable‘s. When .disable is clicked the 1st time, its clicks is undefined, so the 1st if block is ran (just like when you 1st clicked on .rgstr).

You need to save the clicks variable somewhere where both elements can read/write the same value.