CustomTag: HiddenDiv toggles content visibility

Recently I had to display a lot of text in a page but didn’t want it all initially displayed–I wanted to toggle some of it based on user interaction. I wrapped the functionality in a custom tag for easy reuse.

This is toggled text content.

tag and provides a

tag with a link to display the content. The link
can act as either a display once or a toggle. When the hidden
div is diplayed once the link text is hidden. When the hidden
div is a toggle, the link text is toggled between two alternate

-> showText Text to display initially and when the content
is hidden. Default "(show)".

-> hideText Text to display when the content is displayed
and toggle is set to yes. Default "(hide)".

-> toggle True if the link toggles the content display
and false if it displays once and stays on.

All other attributes are passed along to the content div. The
text div has a class of "hiddenDivText" which can be used
for styling.

Only tested in IE6 and Firefox based browsers. Should work
in other standards compliant browsers. If it doesn't work
in your target browser, modify the getElement function.

var hiddenDivShowText = new Array();
var hiddenDivHideText = new Array();

function toggleHiddenDiv(index) {

var textDiv = getElement('hiddenDivLabelDiv_' + index);
var contentDiv = getElement('hiddenDivContent_' + index);
var textSpan = getElement('hiddenDivLabelSpan_' + index);

var display = ( != 'block');

textSpan.firstChild.nodeValue = (display ?
hiddenDivHideText :
)[index]; = 'none'; = display ? 'block' : 'none';

return false;

function getElement(id) {
return document.getElementById(id);




2 thoughts on “CustomTag: HiddenDiv toggles content visibility

  1. Joe,

    Very nice. I wasn’t aware of your tags. Thanks for sharing.

    However, I get an “object expected” error in IE6 on your jContainer page.


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>