X 'Persistent Display' Demo 2


xPersistentDisplay provides persistent display or non-display of elements with specific CSS class names.

There is an older version of this demo.


Check or uncheck the following to make the associated elements be displayed or not displayed. Your choices are saved in a cookie so the next time you visit this page those elements will automatically be displayed or not displayed based on what was saved in the cookie. The checkboxes also will be checked or unchecked accordingly.

The elements controlled by these checkboxes are displayed by default. They are in the right column of this page.

The elements controlled by these checkboxes are not displayed by default. They are in the section below the checkboxes.

Persistent Elements Not Displayed By Default

Persistent Element 4

The Mozilla Developer Network is an excellent resource.

Persistent Element 5

References to have at your fingertips: CSS 2.1 property index, HTML 4.01 element index.

Persistent Element 6

For Java projects these are indispensable: Java SE6 API spec, Java EE5 API spec.

Persistent Element 7

LAMP will light your path! LDP, Apache, MySQL, PHP


Core Concept

You do not have to write any Javascript to use this object – you only have to modify a little CSS and HTML. This object expects there to be a checkbox for controlling the display of elements with a specific classname. You can have any number of checkboxes, each controlling its own group of elements.

The first checkbox must have id='xpd-chk-0'. Subsequent checkboxes must have id='xpd-chk-1', id='xpd-chk-2', etc. The checkbox with id='xpd-chk-0' will control the display of all elements that have class='xpd-ele-0'. The checkbox with id='xpd-chk-1' will control the display of all elements that have class='xpd-ele-1', etc.

Default State

The "persistent elements" can be either displayed or not displayed by default – that is, their initial state before the user has checked or unchecked any checkboxes. But we don't want the elements to be visible as the page is loading if they are to be hidden after the page has loaded. So give all "persistent elements" display:none in CSS. After the page has loaded xPersistentDisplay will read the cookie, show/hide elements as required and check/uncheck their corresponding checkboxes. If you want the "persistent elements" to be displayed by default just give the checkbox (INPUT) elements the checked attribute. View the source of this page to see how I did it in this demo. You can delete the cookie then reload the page to see the default states.

Last Update

Last update to this page: 22 Dec 2010

Persistent Elements Displayed By Default

Persistent Element 0

Visit the X Forums!

Persistent Element 1

Peruse all X functions and objects with the X Library Viewer.

Persistent Element 2

Play around with the many X Demos!

Persistent Element 3

Visit some of my other sites: M Foster, Line of Light.

User Projects

If you are using X, XC or anything from this site, show off your work by posting a link in the X Showcase forum.


By your use of X and/or CBE and/or any Javascript from this site you consent to the GNU LGPL - please read it. If you have any questions about the license, read the FAQ and/or come to the forums.