Toggle Menu

This unobtrusive menu script allows you to have up to 20 menus on your web page where clicking on the element immediately prior to the menu (for example the heading) will hide or show the menu and so allow the menu to take up far less space in the page except when it is needed. The script also uses a cookie to store the information on which menus are hidden and which are visible so that the same menus will be visible on subsequent visits to the same page. Alternatively you can share the same cookie between pages and have the menus retain their state across your entire site.

Menu Heading

  • entry 1
  • entry 2
  • entry 3

Menu Heading2

  • entry 1
  • entry 2
  • entry 3

Applying this script to your site is really easy. All that you need to do is to make sure that each menu is contained within a wrapper (for example a list wrapped inside a <ul> or <ol> tag) and that the element immediately preceding the menu is the heading for the menu that we want to be able to click on to make the menu appear and disappear. We then give the wrapper tag an id (of whatever we like).

For example our HTML might look like this (as it does for the first of the example toggle menus at the right of this page):

<h3>Menu Heading</h3>
<ul id="mylist">
<li>entry 1</li>
<li>entry 2</li>
<li>entry 3</li>

The tags can be completely different from this just as long as the wrapper around the content that is to appear and disappear has an id and that the element to be clicked on immediately precedes it. The script allows for up to twenty such lists to have their state stored in the one cookie (and you can easily increase this limit if you need to by simply making the string of zeros in the script longer).

The next thing that you need to do once you have all of the menus in place in your page is to copy the script to your site and link the script to the bottom of the page just above the </body> tag.


The only thing that you need to change in the script is the very last line which identifies the name of the cookie where the state of the menus is to be stored and an array containing the ids of all of the menus in the page that you want to be able to toggle.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow