'jQuery slidedown to not hide after click?

I have a pretty simple jQuery slidedown login. My only problem is that I would like it to not "restart" / go back up when a link anywhere on the site is clicked and/or page is refreshed, not until the user clicks the close button. Not sure if this is possible.

$(document).ready(function() {

    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown(2000, "easeOutBounce");
    }); 

    // Expand Panel
    $("#open").click(function(){
        $("body").slideDown("slow");
    }); 

    // Collapse Panel
    $("#close").click(function(){
        $("div#panel").slideUp(2000, "easeInBack"); 
    });     

    // Switch buttons from "Log In | Register" to "Close Panel" on click
    $("#toggle a").click(function () {
        $("#toggle a").toggle();
    });     
});

Solution 1:^[1]

You may create a cookie once it slides down and on every $(document).ready() call see if that cookie is there or not and open the panel accordingly.

You can either google "how to set a cookie with javascript" or use $.cookie as suggested by Konstantin D.

See my comments in your code to understand clearly:

$(document).ready(function() {


// see if cookie exists. if it does do the following
// $('div#panel').show();
// if it does not, you don't have to do anything

// Expand Panel
$("#open").click(function(){
    $("div#panel").slideDown(2000, "easeOutBounce");
    // now that it is opened, you should set your cookie here!

}); 

// Expand Panel
$("#open").click(function(){
    $("body").slideDown("slow");
}); 

// Collapse Panel
$("#close").click(function(){
    $("div#panel").slideUp(2000, "easeInBack"); 
    // once it is closed by user, remember to delete the cookie.
});     

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
    $("#toggle a").toggle();
});

Solution 2:^[2]

In order to persist a state in your client UI you would want to use some local storage like cookies. Take a look at the jQuery cookie plugin.

You would add a check to see whether the cookie exists and if it does display the panel expanded.

code:

if ($.cookie("isExpanded")) {
    $("div#panel").css('display', 'block');
}

Solution 3:^[3]

I would do something like this:

$(document).ready(function() {
  if(loginOpen == true)
      $("div#panel").show();

   // Expand Panel
   $("#open").click(function(){
       $("div#panel").slideDown(2000, "easeOutBounce");
       $("body").slideDown("slow");
       loginOpen = true;
   }); 

   // Collapse Panel
   $("#close").click(function(){
       $("div#panel").slideUp(2000, "easeInBack"); 
       loginOpen = false;
   });     

   // Switch buttons from "Log In | Register" to "Close Panel" on click
   $("#toggle a").click(function () {
       $("#toggle a").toggle();
   });     
});

var loginOpen = false;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Konstantin Dinev
Solution 3	Tyanna

'jQuery slidedown to not hide after click?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]