How to keep div menu slided down even after reloading the page, jQuery

Question

Hello, I have the following HTML code:

<form action="" name = "myform" method = "post"> 
   <div id= "button">myButton</div>
   <div id="submit"><input type="submit" name = "submit" value="update"></div>
   <div class = "hiddenMenu" >
      <div id = "checkboxes">
          <input  type="checkbox" name="checkbox1">Checkbox1
          <input  type="checkbox" name="checkbox2">Checkbox2
      </div>
   </div>
</form>

And corresponding Jquery code:

jQuery(document).ready(function($)
{
  jQuery("#button").click(function()
     {
        jQuery(".hiddenMenu").slideDown();
     });    
});

All it does is when user presses on "button" - the "hiddenMenu" with checkboxes slides down. This works perfectly, but the problem is that when I press on "submit" button - page reloads and "hiddenMenu" dissappears so that I have to press "button" again to make "hiddenMenu" visible again. How is it possible to prevent this menu from sliding up after reloading? so that once you pressed button, menu slides down and even after reloading it stays visible? I think it is something to do with "return false", but I dont know where to put this statement. Another question is how to modify jquery so that the only time this menu slides up again is when I press on "button" again?

Thank you very much,

Answer 1

You can trigger the button click event inside document ready event.

$('#button').trigger('click');

Otherwise you can set the style like

display: block; 

for the menu element.

You can use the slideToggle method to slide up and slide down the menu on a single button click.

jQuery(document).ready(function($)
{
  jQuery("#button").click(function()
     {
        jQuery(".hiddenMenu").slideToggle();
     });    
});

Answer 2

By clicking the button you're triggering a state change that you want to maintain on a page refresh (which is really a page transition). That means the server has to be aware of it. So that state change needs to be communicated to the server so it can either generate the page in the correct state or generate the correct Javascript to show or hide the correct content.

You are submitting the page and want to retain that the menu was opened. The easiest way of doing this is by having a form field that communicates the menu is visible. That gets read by the server and interpreted so the response still has that visible. So something like:

<form action="" name = "myform" method = "post"> 
  <div id= "button">myButton</div>
  <input type="checkbox" name="hiddenMenu" id="hiddenMenu">
  <div id="submit"><input type="submit" name = "submit" value="update"></div>
  <div class = "hiddenMenu" >
    <div id = "checkboxes">
      <input  type="checkbox" name="checkbox1">Checkbox1
      <input  type="checkbox" name="checkbox2">Checkbox2
    </div>
  </div>
</form>

and

#hiddenMenu { display: none; }

and

$(function() {
  $("#button").click(function() {
    var cb = $("#hiddenMenu");
    if (cb.is(":checked")) {
      cb.removeAttr("checked");
      $("div.hiddenMenu").stop().slideUp();
    } else {
      cb.attr("checked", true);
      $("div.hiddenMenu").stop().slideDown();
    }
  });
});

Now the server can read that checkbox and act appropriately.

Answer 3

You can use a query parameter and check it inside the document ready event to see if the menu should be in the down position. If it should, then just execute your function to put it into the down position.

Answer 4

If you're using PHP, you could do something like when the form is submitted:

$_SESSION['form'] = 'complete';

if(isset($_SESSION['form'])){

echo 'jQuery(".hiddenMenu").slideToggle();';

}

which will write in the correct jquery but only if they've submitted the form and you set a session variable to say they've done so.

Answer 5

If you have the jQuery cookie plugin, you can use this:

if($.cookie("menu_opened")) {
    $(".hiddenMenu").show();
}

...and the button would have this code:

$("#button").click(function() {
    $.cookie("menu_opened", "true");
    $(".hiddenMenu").slideDown();
});