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
separate
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
values.
-> 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 = (contentDiv.style.display != 'block');
textSpan.firstChild.nodeValue = (display ?
hiddenDivHideText :
hiddenDivShowText
)[index];
textDiv.style.display = 'none';
contentDiv.style.display = display ? 'block' : 'none';
return false;
}
function getElement(id) {
return document.getElementById(id);
}
#js#
hiddenDivShowText.push('#jsStringFormat(attributes.showText)#');
hiddenDivHideText.push('#jsStringFormat(attributes.hideText)#');
#js#
jContainer, part of the jComponents custom tag set I publish, works a lot like this. If you’re interested, check out http://clearsoftware.net/jComponents1_0/
Cheers,
Joe
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.
Sam