Question

I have the following code

<p class="adv-toggle-buttons">             
     <a id="button_open" href="#" style="display: none;">[+] Open advanced unit options</a>
     <a id="button_close" href="#">[-] Close advanced unit options</a>
   </p>

and

 <div class="adv-unit-options">div elements here to be hidden/toggled</div>

script

  $(document).ready(function() {

  $('#button_open').hide(); //initially we keep the open button hidden

 $('#button_close').click(function () {
  $(this).hide(); //this hides the close button as the div is now closed
  $('.adv-unit-options').slideUp('fast'); //hides the div
  $('#button_open').show(); //shows the open button
  $.cookie("openclose","closed", {expires: 1}); // sets cookie
  return false;
});

$("#button_open").click(function () {
  $(this).hide(); //hides the open button as the div is now open
  $('.adv-unit-options').slideDown('fast'); //shows the div
  $('#button_close').show(); //shows the close button
  $.cookie("openclose","open", {expires: 1}); //sets cookie
  return false;
});

 if($.cookie("openclose") == "closed") {
    $("#button_close").hide();
    $("#button_open").show();
    $('.adv-unit-options').hide();
    };
});

For the life of me I cannot figure out how to have this in reverse – Initially I want to have [+] Open advanced unit options (this to be visible) and the div with the class of ‘adv-unit-options’ to be hidden.

The page I’m working on has a submit button so on page refresh/reload I want to remember what was last selected

Any help would be much appreciated
regards NickP

Answer 1

Fiddle here

EDIT: Cookie code and link to JQuery cookie added to keep visibility state.

Y.