simple code to Show / Hide with cookie

Does开发者_StackOverflow社区 anyone know a code as simple as possible to show / hide HTML.

With:

-Store the cookies option

-Effect to the Show / Hide

The jquery cookie plugin could simplify cookie management. As far as showing/hiding HTML is concerned you may take a look at the show() and hide() methods.

It really depends on the event/reason the content needs to show/hide...

Is it user specific content that must appear for a particular user, if so, how are you identifying the user (sessions, openID)? Or is it event driven, ie, a user clicks on a button and content shows/hides and the cookie stores the show/hide state?

• Damo

Probably more than you need, but I use this with the tablesorter plugin to collapse/expand sections of tables, store the state in the cookie and with .toggle() you can get a nice effect.

function tableContainer(id,visible,sortColumn,sortOrder){
  this.ID = id;
  this.Visible = visible;
  this.SortColumn = sortColumn;
  this.SortOrder = sortOrder;
}

function bindTableHeaders(element){
  //Bind click handler to the table THs to update object as to current sort column.
  $("thead th","#" + element).bind("click",function(){
    var order = this.order
    var column = this.column
    var $table = $(this).closest("table")
    var visible = $table.attr("expanded") //Technically I suppose if you can click these then it must be visible
    var id = $table.attr("id")

    var tableObj = new tableContainer(id,visible,column,order);

    $.cookie(element, JSON.stringify(tableObj), { secure: true }); //Write the current state into the section cookie   
  });
};

function recoverState(element) {
  // pull cookie for page state and visibility
  var elementData = $.cookie(element);

  if (elementData != null){
    // parse JSON based on object representation
    var json = JSON.parse(elementData)
    var id = json.ID;
    var visible = json.Visible;
    var sortColumn = json.SortColumn == undefined ? 0 : json.SortColumn
    var sortOrder = json.SortOrder == undefined ? 0 : json.SortOrder
  } else {
    var id = element;
    var visible = "true"
    var sortColumn = 0;
    var sortOrder = 0;
  }

  // switch visibility
  if(visible == "false"){
    toggleElement(element)
  }

  // Determine if this section has any data (eg. a <tbody>)
  if ($("tbody","#" + id).length == 0 || $("tbody","#" + id).html() == "") 
    return

  if (pageAction == "Edit"){
      $("#" + id).tablesorter({widgets: ['zebra'], sortList: [[sortColumn,sortOrder]]});      
  } else {
      $("#" + id)
      .collapsible("td.collapsible",{
                    collapse:true
                   })
      .tablesorter({widgets: ['zebra'], sortMultiSortKey:'false', sortList: [[sortColumn,sortOrder]]}); 
  }  
}

function toggleElement(element) {
 if ($("#" + element).attr("expanded") == "true"){
  $("#" + element).attr("expanded","false")
  $("#" + element).hide(); 
  var isVisible = "false"
 } else {
  $("#" + element).attr("expanded","true")
  $("#" + element).show();
  var isVisible = "true"
 } 

 //Rewrite the cookie for this section changing only the visibility
 var elementData = $.cookie(element);
 var visible = isVisible;
 if (elementData != null){
   var json = JSON.parse(elementData)
   var id = json.ID;
   var sortColumn = json.SortColumn;
   var sortOrder = json.SortOrder;
 } else {
   var id = element
   var sortColumn = 0;
   var sortOrder = 0;
 }

 var tableObj = new tableContainer(id,visible,sortColumn,sortOrder);
 $.cookie(element, JSON.stringify(tableObj), { secure: true }); //Write the current state into the section cookie   
}