Just a quick easy question

**floppy** · 08-29-2006, 04:40 PM

I found some script on the web just curious if anyone could udpate it to work in firefox also.

Code:

<script language="JavaScript1.2">
<!--
/*Contractable Headers script- By Website Abstraction
(www.wsabstract.com)
Over 200+ free JavaScripts here!
*/
var head="display:''"
function doit(header){
var head=header.style
if (head.display=="none")
head.display=""
else
head.display="none"
}
//-->
</script>

<body>
<center><h1>Expandable Headers</h1></center>
<p>This is ideal for such things as lists of links, etc. The visitor with Internet Explorer 4.x sees only the headers, and need only click on the subject that interests him to expand that particular section. Any type of content can be hidden; here I've used a definition list and a table. A second click on the section header contracts it again. Browsers other than Internet Explorer 4.x show the contents fully expanded, so the script degrades well.</p>
<h2 style="cursor:hand" onClick="doit(document.all[this.sourceIndex+1])" title="Click here to expand/contract!">Some JavaScript Links</h2>
<span style="display:none" style=&{head};>
<dl>
<dt><a href="http://developer.netscape.com/docs/manuals/communicator/jsguide4/index3.htm" target="_top">Netscape</a><dd>The official source about JavaScript
<dt><a href="http://javascriptsource.com" target="_top">The JavaScript Source</a><dd>Lots of good examples 
<dt><a href="http://www.ce.net/users/ryan/java/" target="_top">The Unofficial JavaScript Resource Center</a>
<dd>Some useful examples
<dt><a href="http://www.coolshare.com/html/" target="_top">JAVAZOO</a>
<dd>A page stuffed with JavaScript examples
<dt><a href="http://javascript.developer.com/" target="_top">Gamelan JavaScript Pages</a>
<dd>A truly excellent collection of links to JavaScript pages and collections
<dt><a href="http://www.freqgrafx.com/411/library.html">Snippet Library</a>
<dd>A fine collection of scripts
<dt><a href="http://www.geocities.com/SiliconValley/7116/">JavaScript Planet</a>
<dd>Some nice scripts
<dt><a href="http://irt.org/">IRT.ORG</a>
<dd>An excellent collection of articles and scripts.
</dl>
</span>
<h2 style="cursor:hand" onClick="doit(document.all[this.sourceIndex+1])" title="Click here to expand/contract!">Some DHTML Links</h2>
<span style="display:none" style=&{head};>
<table cellspacing="10" cellpadding="2">
<tr><td><a href="http://www.microsoft.com/workshop/author/dhtml/">Microsoft's Site Builder Network<br>-Dynamic HTML</a></td>
<td><a href="http://www.dhtmlzone.com/index3.html">Macromedia's DHTML Zone</a></td></tr>
<tr><td><a href="http://developer.netscape.com/library/documentation/communicator/dynhtml/index3.htm">Dynamic HTML in Netscape Communicator</a></td>
<td><a href="http://www.erols.com/jrule/dhtml/">DHTML Demos</a></td></tr>
<tr><td><a href="http://www.insidedhtml.com/home.htm">Inside DHTML</a></td>
<td><a href="http://members.tripod.com/~dynduo/ ">The Dynamic Duo</a></td></tr>
<tr><td><a href="http://www.webreference.com/dhtml/">Dynamic HTML Lab</a></td>
<td><a href="http://webcoder.com/">WebCoder.com</a></td></tr>
<tr><td><a href="http://rapid.wrox.co.uk/webdev/BookList.asp">The Wrox Web-Developer<br>Books and Samples Page</a></td>
<td><a href="http://www.projectcool.com/developer/">Project Cool<br>Developer Zone</a></td></tr></table>
</span>

I basically just need to be able to use one word as my toggle point and it has to start contracted. This script serves that purpose, but is not a link in firefox. I have no idea why.

**blm126** · 08-29-2006, 05:33 PM

Anywhere you see

Code:

document.all[this.sourceIndex+1]

replace it with

Code:

this.nextSibling

**floppy** · 08-29-2006, 05:57 PM

yes, that worked great.

**mwinter** · 08-29-2006, 06:49 PM

Really? You didn't test it very well then as it fails here.

blm126: The next sibling will be a text node in some browsers, not an element. One should use loops to traverse the document tree, checking for the right node type.

That code you found is complete junk: both the markup and client-side code. There is a script here on DD to do what you want, both in the scripts section and here in the forums (I've written and posted my own).

Ditch whatever you've found, erase the site from your history (you don't want to go back if it suggests rubbish like that), and change to a half-decent script.

Mike

**floppy** · 08-29-2006, 09:58 PM

where is your script?

**blm126** · 08-29-2006, 11:30 PM

Here, I've made a simple script to do what you want(I think).

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<script type="text/javascript">
		function toggleSib(ob){
			while(ob.nextSibling.nodeType != 1){
			ob = ob.nextSibling
			}
			if(ob.nextSibling.style.display == 'none'){
				ob.nextSibling.style.display = '';
			}
			else{
				ob.nextSibling.style.display = 'none';
			}
		}
		</script>
	</head>
	<body>
	<h1 onClick="toggleSib(this)">Show/Hide Sibling</h1>
	<span style="display: none;">Hide This</span>
	</body>
</html>

**floppy** · 08-29-2006, 11:51 PM

that works great!

**mwinter** · 08-30-2006, 01:18 AM

Originally Posted by floppy

where is your script?

The thread where I originally posted it was titled, Expandable/Collapsible Text not working in Firefox 1.04, and includes a simple example and a discussion of the usage.

It's over a year old now, and I'd do things a little differently, but the code is perfectly usable. Most of the changes would be made to the supporting code (dom.js), anyway.

Originally Posted by blm126

while(ob.nextSibling.nodeType != 1){

That will error out in browsers that don't implement the nextSibling property, and it won't distinguish between an element and a comment node in IE 5.x (the latter has a tag name [or node name] of "!"; an exclamation mark).

The span element is not permitted as a child of the body element in Strict HTML, nor is it a suitable container (it's an in-line element). Moreover, where scripting fails to alter the display property, the content of the element will not be visible unless the user disables CSS.

I realise that these problems originate from the original post, but you're still repeating them.

Mike

**blm126** · 08-30-2006, 08:47 PM

Ok, here is my new and improved version (that address all those problems,mwinter pointed out)
Only works on h2 elements(can be changed)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<script type="text/javascript">
		window.onload = toggleLoad;
		function toggleLoad(){
			var h1s = document.getElementsByTagName("h2");
			var toggler = new RegExp("(^|\\s)toggler(\\s|$)");
			for(i=0;i<h1s.length;i++){
				if(toggler.test(h1s[i].className)){
					toggleSib(h1s[i]);
					h1s[i].onclick = toggleThis;
				}
			}
		}
		function toggleThis(){
			toggleSib(this);
		}
		function toggleSib(ob){
			while(ob.nextSibling && ob.nextSibling.nodeType != 1 || ob.nextSibling.nodeName == '!'){
			ob = ob.nextSibling
			}
			if(ob.nextSibling){
				if(ob.nextSibling.style.display == 'none'){
					ob.nextSibling.style.display = '';
				}
				else{
					ob.nextSibling.style.display = 'none';
				}
			}
		}
		</script>
	</head>
	<body>
	<h2 class="toggler">Show/Hide Sibling</h1>Some Text <!--Comment-->
	<div>Hide This</div>
	<h2 class="toggler">No Sibling</h2>
	</body>
</html>

Thread: Just a quick easy question

Thread Tools

Search Thread

Just a quick easy question

Bookmarks

Bookmarks

Posting Permissions