Home/ Questions/Q 6083393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T11:23:55+00:00

I have an admin page with an accordion javascript to show/hide divs. <div class=accordion>

  • 0

I have an admin page with an accordion javascript to show/hide divs. 

<div class="accordion">
    <h2>Pending</h2>
    <div id="pending" class="accordion-item">PARTIALVIEW</div>
    <h2>Current</h2>
    <div id="current" class="accordion-item">PARTIALVIEW</div>
    <h2>All</h2>
    <div id="all" class="accordion-item">PARTIALVIEW</div>
</div>

when they delete an item, the page refreshes and they are back to collapsed. I want to have it remember which ones were open and which ones were closed.

the accordion javascript gives the div style="display: none" or style="display: block"

is there a way to get what the style is before the page is reloaded and apply it after it is loaded again?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want to see the styles and changes actively on the page I recommend using Firebug (a FireFox plugin).

    As for saving the state, there are two approaches. The first is an AJAX approach. The second a JS only, cookie-based approach.

    For the AJAX method you need to write a JS function that fires off whenever the state is changed. This method then sends the state of all of the collapsible options to the server in a quick behind-the-scenes query. The server then saves this information to a session variable. Then when the page is reloaded the server can plant a JS array with the last known state information for each item on the page.

    For the second method you must set a cookie that holds a variable with the state of all of the items. This can be a simple array. This works the same as the AJAX method except that the data is saved on the client-side browser instead of the server. You get the state from the cookie array instead of the server array.

    For either one of these I would recommend using the JQuery library. For the cookie method I would recommend using the Cookie plugin for JQuery (http://plugins.jquery.com/project/Cookie). Here is a quick howto article about this: http://jquery-howto.blogspot.com/2010/09/jquery-cookies-getsetdelete-plugin.html

    JQuery – http://jquery.com/
    JQuery UI – http://jqueryui.com/
    Visual JQuery (a great, easy to use reference for JQuery) – http://visualjquery.com/
    Firebug – http://getfirebug.com/
    Firefox – (never leave home without it) http://www.mozilla.com/en-US/firefox/fx/

    • 0