Unobtrusive javascript toggle scripts
Here's a link to the page that this replaced. Next, here are the scripts in action.
So anyway, here's what happened... I realised that some of the scripts on this site were a little bit behind the times. Somewhat passé. Past their sell-by date. Being a bit of a fashion victim, I wanted to write a script that would allow elements to be toggled by the previous element without any need of anchor tags or inline 'onclick="..."' stuff. So, with a little help from good people like Kravvitz of Dynamic Site Solutions and lots of reading around, I think I found some good ways to do this kind of thing.
I started with two elements (I used paragraphs, because... well, why not?) Like this:
HTML
<p id="salutation">hi</p>
<p>there</p>
The idea was to make it so that when you click 'hi', 'there' becomes visible and when you click 'hi' again, 'there' disappears again.
I wrote a couple of scripts to do that. This:
javascript
function toggleNext(el) {
var next=el.nextSibling;
while(next.nodeType != 1) next=next.nextSibling;
next.style.display=((next.style.display=="none") ? "block" : "none");
}
and this:
javascript
function toggleNextById(el) {
var ccn="clicker";
var clicker=document.getElementById(el);
clicker.className+=" "+ccn;
clicker.onclick=function() {toggleNext(this)}
toggleNext(clicker);
}
This would give the class name 'clicker' to the targeted element and make it so that the 'display' property of the next element would be toggled between 'block' and 'none' by clicking it (the targeted element). The 'clicker' class could be styled with CSS, so I just did this:
CSS
.clicker {
cursor:pointer;
color:blue;
}
This went in the onload event:
javascript
window.onload=function() {toggleNextById('salutation')}
and I got this:
hi
there
Everything from here on on this page is an extension of or variant of that.
It could be good to apply this to headings. For that, you might target 'hx' elements rather than 'id's.
The function that is called by the onload event to set the 'clickers' becomes this:
javascript
function toggleNextByTagName(tname) {
var ccn="clicker";
var clickers=document.getElementsByTagName(tname);
for (i=0; i<clickers.length; i++) {
clickers[i].className+=" "+ccn;
clickers[i].onclick=function() {toggleNext(this)}
toggleNext(clickers[i]);
}
}
The onload event might look like this:
javascript
window.onload=function() {toggleNextByTagName('h2')}
Here's some HTML:
HTML
<h2>clickable heading</h2>
<div class="info">
<p>some info</p>
<p>more info</p>
</div>
<h2>clickable heading</h2>
<div class="info">
<p>some info</p>
<p>more info</p>
</div>
Example:
clickable heading
some info
more info
clickable heading
some info
more info
I can see many times that using a particular tag name (like 'h2') would not be appropriate - you'd often want to use a class instead. For that, you need to get the elements by the class name. Unfortunately, the W3C DOM doesn't have a function to do that (I've always wondered why not...) So, I wrote one. I think there are lots of scripts like this out there, but I just fancied doing it myself. I found it was a bit easier to be more specific and get elements by tag and class name together (e.g. 'p' and 'clicker').
Here's my 'getElementsByTagAndClassName()' function:
javascript
function getElementsByTagAndClassName(tag,cname) {
var tags=document.getElementsByTagName(tag);
var cEls=new Array();
for (i=0; i<tags.length; i++) {
var rE = new RegExp("(^|\\s)" + cname + "(\\s|$)");
if (rE.test(tags[i].className)) {
cEls.push(tags[i]);
}
}
return cEls;
}
Here's a function that uses that function to set the 'clickers':
javascript
function toggleNextByTagAndClassName(tag,cname) {
var ccn="clicker";
clickers=getElementsByTagAndClassName(tag,cname);
for (i=0; i<clickers.length; i++) {
clickers[i].className+=" "+ccn;
clickers[i].onclick=function() {toggleNext(this)}
toggleNext(clickers[i]);
}
}
Some HTML:
HTML
<p>a normal paragraph</p>
<p class="number">one</p>
<p class="info">Some info about number one.</p>
<p>a normal paragraph</p>
<p class="number">two</p>
<p class="info">Some info about number two.</p>
<p>a normal paragraph</p>
Example:
a normal paragraph
one
Some info about number one.
a normal paragraph
two
Some info about number two.
a normal paragraph
You might want to be more specific and target those elements within a certain section that have a particular class. You just change this:
javascript
var tags = document.getElementsByTagName(tag);
to this:
javascript
var tags = document.getElementById(id).getElementsByTagName(tag);
Then the 'getElements...' function looks like this:
javascript
function getElementsByIdTagAndClassName(id,tag,cname) {
var tags=document.getElementById(id).getElementsByTagName(tag);
var cEls=new Array();
for (i=0; i<tags.length; i++) {
var rE=new RegExp("(^|\\s)" + cname + "(\\s|$)");
if (rE.test(tags[i].className)) {
cEls.push(tags[i]);
}
}
return cEls;
}
And the function that uses it looks like this:
javascript
function toggleNextByIdTagAndClassName(id,tag,cname) {
var ccn="clicker";
clickers=getElementsByIdTagAndClassName(id,tag,cname);
for (i=0; i<clickers.length; i++) {
clickers[i].className+=" "+ccn;
clickers[i].onclick=function() {toggleNext(this)}
toggleNext(clickers[i]);
}
}
Some HTML:
HTML
<div id="byidtagandclass">
<p>a normal paragraph</p>
<p class="number">one</p>
<p class="info">Some info about number one.</p>
<p>a normal paragraph</p>
<p class="number">two</p>
<p class="info">Some info about number two.</p>
<p>a normal paragraph</p>
</div>
Example:
a normal paragraph
one
Some info about number one.
a normal paragraph
two
Some info about number two.
a normal paragraph
I think one good use for this is for definition lists. Definition lists tend to have pairs - a definition term (dt) and definition definition (dd). When you have a list of items, each with information attached to them, you might want to hide the extra information, which can be shown when needed.
In this situation, we only have to worry about the id of the list and the 'dt' tags.
Here's a list:
HTML
<dl id="dlist1">
<dt>Topic One</dt>
<dd>Info about topic one.</dd>
<dt>Topic Two</dt>
<dd>Some info about topic two.</dd>
<dt>Topic Three</dt>
<dd>A little info about topic three.</dd>
</dl>
I made small adjustments to the scripts presented above to do different things with that list. The first one behaves the same as the scripts above - a basic toggle effect.
The script:
javascript
function toggleNextByIdAndTag1(el,tname) {
var ccn="clicker";
clickers=document.getElementById(el).getElementsByTagName(tname);
for (i=0; i<clickers.length; i++) {
clickers[i].className+=" "+ccn;
clickers[i].onclick=function() {toggleNext(this)}
toggleNext(clickers[i]);
}
}
The 'toggleNext()' function that it uses is the same as the one above.
Here's the list:
- Topic One
- Info about topic one.
- Topic Two
- Some info about topic two.
- Topic Three
- A little info about topic three.
But, maybe you want to see only one bit of info at a time. In that case, the 'toggleNext()' function needs to be changed so that it hides all of the 'dd's except for the one that you want to see. Like this:
javascript
function toggleNext2(el,tname,first) {
var next=el.nextSibling;
var tags=el.parentNode.getElementsByTagName(tname);
while(next.nodeType!=1) next=next.nextSibling;
next.style.display=((next.style.display=="none") ? "block" : "none");
if (first!=1){
for (i=0; i<tags.length; i++) {
var tohide=tags[i].nextSibling;
while(tohide.nodeType!=1) tohide=tohide.nextSibling;
if (tohide!=next){tohide.style.display="none";}
}
}
}
javascript
function toggleNextByIdAndTag2(el,tname) {
var ccn="clicker";
clickers=document.getElementById(el).getElementsByTagName(tname);
for (i=0; i<clickers.length; i++) {
clickers[i].className+=" "+ccn;
clickers[i].onclick=function() {toggleNext2(this,tname)}
toggleNext2(clickers[i],tname,1);
}
}
This is the result:
- Topic One
- Info about topic one.
- Topic Two
- Some info about topic two.
- Topic Three
- A little info about topic three.
You might want the information to be shown in a different place... You can have the clickers staying static while the information appears to the side or below or whereever. This can be done by using absolute positioning on the 'dd's (the 'dl' needs to be 'position:relative'). Keeping in mind that some users do not have javascript enabled, it's probably best not to do this automatically in the CSS - those without javascript could be left with a bloody mess on their screen. So, we can set a class in the CSS and set that class to the one one we want to see each time. It would also be good then to highlight the clicker that has been clicked. This can be done the same way - by switching classes each time.
Here are the rules for the two new class:
CSS
.abs {
position:absolute;
top:20px;
left:300px;
width:20em;
padding:3px;
border:1px solid gray;
}
.selected {
color:red;
}
And here's the new 'toggleNext()' function:
javascript
function toggleNext3(el,tname,first) {
var abscn="abs";
var selcn="selected";
var next=el.nextSibling;
var tags=el.parentNode.getElementsByTagName(tname);
while(next.nodeType!=1) next=next.nextSibling;
next.style.display=((next.style.display=="none") ? "block" : "none");
var rE = new RegExp("(^|\\s)"+abscn+"(\\s|$)");
if (rE.test(next.className)==false) {next.className+=" "+abscn;}
if (first!=1){
for (i=0; i<tags.length; i++) {
var tohide=tags[i].nextSibling;
while(tohide.nodeType!= 1) tohide=tohide.nextSibling;
if (tohide!=next){tohide.style.display="none";}
tags[i].className=tags[i].className.replace(new RegExp(selcn+"\\b"), "");
if (tags[i]==el && next.style.display=="block"){
var rEx=new RegExp("(^|\\s)"+selcn+"(\\s|$)");
if (rEx.test(tags[i].className)==false) {tags[i].className+=" "+selcn;}
}
}
}
}
And the resulting list:
- Topic One
- Info about topic one.
- Topic Two
- Some info about topic two.
- Topic Three
- A little info about topic three.
Next, you might want to automatically show the information for the first topic onload. You just need to add an if/else statement. Like this:
javascript
function toggleNext4(el,tname,first) {
var abscn="abs";
var selcn="selected";
var next=el.nextSibling;
var tags=el.parentNode.getElementsByTagName(tname);
while(next.nodeType!=1) next=next.nextSibling;
next.style.display=((next.style.display=="none") ? "block" : "none");
var rE=new RegExp("(^|\\s)"+abscn+"(\\s|$)");
if (rE.test(next.className)==false) {next.className+=" "+abscn;}
if (first!=1){
for (i=0; i<tags.length; i++) {
var tohide=tags[i].nextSibling;
while(tohide.nodeType!=1) tohide=tohide.nextSibling;
if (tohide!=next){tohide.style.display="none";}
tags[i].className=tags[i].className.replace(new RegExp(selcn+"\\b"), "");
if (tags[i]==el && next.style.display=="block"){
var rEx=new RegExp("(^|\\s)"+selcn+"(\\s|$)");
if (rEx.test(tags[i].className)==false) {tags[i].className+=" "+selcn;}
}
}
}
else {
var firstone=tags[0].nextSibling;
while(firstone.nodeType!=1) firstone=firstone.nextSibling;
firstone.style.display="block";
var rEx=new RegExp("(^|\\s)"+selcn+"(\\s|$)");
if (rEx.test(tags[0].className)==false) {tags[0].className+=" "+selcn;}
}
}
The function that's called onload is essentially the same as before.
Here's what happens now (the same as before, but with the first one showing onload):
- Topic One
- Info about topic one.
- Topic Two
- Some info about topic two.
- Topic Three
- A little info about topic three.
This idea could be used to show/hide the content of your page, and if that's what you're doing, you probably don't want the user to toggle away your content and be left with a big blank space in the middle of their screen. The next function stops that from happening.
javascript
function switchNext1(el,tname,first) {
var abscn="abs";
var selcn="selected";
var next=el.nextSibling;
var tags=el.parentNode.getElementsByTagName(tname);
while(next.nodeType!=1) next=next.nextSibling;
next.style.display=((next.style.display=="none") ? "block" : "none");
var rE=new RegExp("(^|\\s)"+abscn+"(\\s|$)");
if (rE.test(next.className)==false) {next.className+=" "+abscn;}
if (first!=1){
for (i=0; i<tags.length; i++) {
var tohide=tags[i].nextSibling;
while(tohide.nodeType!=1) tohide=tohide.nextSibling;
if (tohide!=next){tohide.style.display="none";}
tags[i].className=tags[i].className.replace(new RegExp(selcn+"\\b"), "");
if (tags[i]==el){
next.style.display="block";
var rEx=new RegExp("(^|\\s)"+selcn+"(\\s|$)");
if (rEx.test(tags[i].className)==false) {tags[i].className+=" "+selcn;}
}
}
}
else {
var firstone=tags[0].nextSibling;
while(firstone.nodeType!=1) firstone=firstone.nextSibling;
firstone.style.display="block";
var rEx = new RegExp("(^|\\s)"+selcn+"(\\s|$)");
if (rEx.test(tags[0].className)==false) {tags[0].className+=" "+selcn;}
}
}
And the results of that:
- Topic One
- Info about topic one.
- Topic Two
- Some info about topic two.
- Topic Three
- A little info about topic three.
The only problem with this is that absolute positioning takes an element out of the flow of the document. Maybe you want to keep that flow. You might have a footer that you want positioned just below the visible content. How do you do that? Well, I figured you could just copy the 'dd' that you wanted to see and place it somewhere else - like at the end of the list, for example. The next function does that:
javascript
function switchNext2(el,tname,first) {
var selcn="selected";
var parent=el.parentNode;
var tags=parent.getElementsByTagName(tname);
var next=el.nextSibling;
var last=parent.lastChild;
while(last.nodeType!=1) last=last.previousSibling;
while(next.nodeType!=1) next=next.nextSibling;
next.style.display="none";
if (first!=1){
for (i=0; i<tags.length; i++) {
var tohide=tags[i].nextSibling;
while(tohide.nodeType!=1) tohide=tohide.nextSibling;
if (tohide!=next){tohide.style.display="none";}
tags[i].className=tags[i].className.replace(new RegExp(selcn+"\\b"), "");
if (tags[i]==el){
var rEx=new RegExp("(^|\\s)"+selcn+"(\\s|$)");
if (rEx.test(tags[i].className)==false) {tags[i].className+=" "+selcn;}
}
}
var clone=next.cloneNode(true);
clone.style.display="block";
parent.removeChild(last);
parent.appendChild(clone);
}
else {
var firstone=tags[0].nextSibling;
while(firstone.nodeType!=1) firstone=firstone.nextSibling;
var clone=firstone.cloneNode(true);
clone.style.display="block";
if (last.innerHTML!=clone.innerHTML){parent.appendChild(clone);}
var rEx=new RegExp("(^|\\s)"+selcn+"(\\s|$)");
if (rEx.test(tags[0].className)==false) {tags[0].className+=" "+selcn;}
}
}
Here's the result:
- Topic One
- Info about topic one.
- Topic Two
- Some info about topic two.
- Topic Three
- A little info about topic three.
With a little bit of CSS, that 'menu' could be horizontal.
CSS
#dlist7 dt {
float:left;
padding:0.5em;
}
That give us this:
- Topic One
- Info about topic one.
- Topic Two
- Some info about topic two (more info than for topic one).
- Topic Three
- A little info about topic three.
This whole idea can be adapted to toggle children instead of the next element. Something I was working on recently that did that was this bibliography. Since writing this, I've tried the bibliography thing again and I came up with this bibliography, which is much better.
Comments
#1 #2Sorry for double post, but you might want to know whats confusing me. It's just what do I need to put in 'el' and 'tname'. I'm guessing tname is the name of the id/class and first =0/1 but el no idea. Please tell me if I am on the right track or not. Thanks
If you look at this page here and check the source, you'll find the onload event after the scripts. On that page, it looks like this:window.onload=function(){switchNextByIdAndTag2('dlist','dt')}
'dlist' is the id of my definition list, and 'dt' is the kind of tag I want to be the 'clicker'.
To use that script, the only thing you need to change is the onload event. The first thing in the onload event is the id of the element (probably a 'div', 'ol', 'ul' or 'dl') that you want to target, and the next thing is the kind of tag you want to use as the 'clicker' (possibly 'dt', 'h3', maybe even 'img').
Let me know if that's not clear enough.
Thanks alot, works perfect now 
Great page and helped me a lot to start creating a menu.
Needed one to display some arenas for a game menu and this was the only possible way to do it. Everything else needed a lot more space, scrolling and was confusing.
Many thanks to BonRouge
Hey, I used your script and it worked perfectly when I preview the page from GoLive. But, when I upload the page to the server, its no longer toggles. All the imfo is displayed. Any thoughts? (BTW, I'm also using SSI, could that be the conflict?)
RLEEN,
Sounds strange. Could you post a link to your page, or send me a link via my contact form?
Your code is great. I modify it for my website without trying to understand. By multiplying the choices in the last example a table was formed, which is what I wanted. However, the first column needs to be wider. Do you know how to do it? coffee
hanna,
You could add a class to each of those on the left and give that class a bigger width than the others.
I like coffee too.
Magic, thanks Bon cheers
Great article!!!
Question: whe you have more than 1 toggle unit, how do you make sure all the first items are selected on page load? (I'm experimenting with the last horizontal example).
I read the js-file of this page that includes that feature, but can't make it work
solipsys
Valencia
sorry: got it working!!!!
Valencia
Just perfect ! Thanks a lot !
(CSS)
I got the script to work perfectly on one of my sites, but I can't on another. Any idea why this may be? I can send you the source code if you'd like.
I fixed it by making the toggle table an include file. I guess the 'onclick' was interfering with other javascript i had on the page.
Thanks for your script!
Hi BonRouge congratulations for your effort,it is really valuable
Now,Please allow me to say the problem I face with the switch content.It works great in internet explorer but in firefox creates an extra space when the content is hide.I wonder if you have any solution to this.
Regards.
Brilliant. I've used your old methods for a long while -- I'm glad to see such a well put together update. I've incorporated this into many of our major sites. Thanks!
Hi BonRouge,
I used two of your codes on one page of my website: one from this page and the Clickdrop menu http://bonrouge.com/~clickdrop and it worked just perfect until I moved the website to a new server.
Now the menu does not contract, as it should.
I read your advice that two window.onload=function() on one page can cause a problem and tried to add switchNextByIdAndTag2('dlist','dt') to
window.onload=function(){
switch1('; if($show) {echo "'$show'";} echo ');
makeBiscuit(\'clickdropbiscuit\',\'yes\',10);
but the page then returns error and I have no idea how to fix it.
http://www.delnut.com/comparison.php
hanna,
I had a look at your page and it seems that if you put the functions together like this:window.onload=function(){...you'll be fine.
switch1('two');
makeBiscuit('clickdropbiscuit','yes',10);
switchNextByIdAndTag2('dlist','dt');
}
Thank you very much, BonRouge, for your immediate response. As you said, shifting switchNextByIdAndTag2('dlist','dt'); fixed the menu. However, there is no table anymore. The page is stretched as if it was permanently loading.
I believe the problem is that window.onload=function() is inside the conditional statement, but how to fix it is beyond me.
Yes, yours works because you do not have the conditional statement, or at least this is what I think is the problem, although this is not my turf, I only copy what you teach.
Thanks, that was a big help.
Do i put Script type ate the start?
Hi,
i've used your script (thank you), through another site that did a FAQ for a university, my problem : I've put text and an image into the "slide down"area, and in IE and FF, all the info shows at first on loading, before hiding away, I'm thinking it's because of the image taking too long to download, is there anyway to keep that from happening, so that is doesn't show at all on loading?
I would appreciated your response, have been looking for an answer on google...no luck yet,
Thanks
Claudia
Claudia,
If I understand you right, my solution to this problem is explained at the bottom of this page: http://bonrouge.com/~clickdrop.
I hope that helps.
Hi Ben,
Awesome tutorial, but (on the last example) if I wanted to put a 'next' and 'previous' text at each end (say I had a long line of 'Topic One', 'Topic Two' etc etc) how would I go about editing it?
Many thanks!
GoodRed, many thanks for this excellent tutorial!
I have set up a tree menu using this (see http://www.souris.us/temp), but I'd like to combine functions into the onclick, specifically the DD ajaxpage. The way things are set up, IE6 likes to make my "javascript:" links disappear once they've been clicked, and I'd like them not to. Any words of advice are much appreciated!
Cheers!
Jake,
It looks like a problem of style rather than javascript.
You have this in your stylesheet:
.menutree a {
text-decoration: none;
color: white;
}
Try changing it to this:.menutree a, .menutree a:visited {
text-decoration: none;
color: white;
}
Bingo! Thanks so much for pointing out what should have been blindingly obvious!!
Best
Thanks for the code!
When I use the code for one drop-box, it works (as in you're example), but when I put another drop-box on the same page, only the first one works. If i put another id like this: {toggleNextById('salutation','salutation2')}
shouldn't it work? sorry, if I'm being blatantly stupid.
Confused-
Maz,
Sorry about the late reply, but instead of doing what you have there, you could do this:window.onload=function() {
toggleNextById('salutation');
toggleNextById('salutation2');
}
Thanks a lot, BonRouge, it works perfectly now.
Maz,
Thanks a lot for that quick reply.
I've been particularly busy lately and I haven't had chance to get back to many comments and emails. When I replied to you today, I kind of thought that I was just writing for future readers. I didn't think you'd be back to check.
Anyway, I'm glad I helped.
I tried some of these codes at MySpace Proxywhich is on a rich java hosting environment. I can't seem to get these scripts working, any advice? I'm also wanting to change (hi) to 'show' then 'hide' when script is toggled.
very nice tutorial 
Excellent tutorial. I'm not a javascript person and yet the way you presented everything here made it really easy to understand. Thank you so much for putting this together!
Oh my, I don't really understand all this but I got enough of the jist to plug it into my HTML.
When I saw exactly what I wanted to happen on my page I almost yelled "oh my god I f**king love this guy".
Paul_Bags,
Wow! What can I say? I don't usually get that kind of reaction! I'm glad if my little site has helped you in some way.
I don't get this, this is confusing, can you tell me the full code for this.. http://i45.tinypic.com/291gbbl.jpg ?
Hey B-Rouge,
I have to second Paul_Bags, you're brilliant! Thanks for the code and the tutorial, the switchNext is perfect for what I'm trying to accomplish on my site.
Thanks for all the comments and replies too, those were very helpful for figuring out how to have nine of these babies going at once on the same page.
bonrouge.com bookmarked for future exploration!
Slartibartfast,
Glad to have helped.
Is there a way to make the secondary output also a link to a third panel...
Example.. Text in column one shows text in column two, column two shows text in column three?
Thanks for your help!
Hi Bon,
I am naive to the javascript. I am using html to build up my website. i liked the javascript function where the visitor can see only one option at a time. I read all the comments but couldnt figure out what code i should include in the main body of the html to communicate between the script(inside the script an style tags) and my text (inside the body). Could you please help in this regard. Thanks in advance
Sudheer,
The good thing about this kind of script is that it is 'unobtrusive', meaning that you don't need to add anything to the HTML for the script to work.
Look at the code in the examples (there7s a link at the top of the page) and you might see that the script finds what you tell it to find in the HTML. You don't need to add anything special to the HTML it is written in the same way as the examples.
I hope that makes some sense. If you have more problems with this, maybe you could send me your page and I could have a look at it (if I have time).
BonRouge-
This is perfect for what I'm trying to do, I had one quick question though. I'm utilizing toggleNextByIdAndTag3() and its cohorts. I've been trying to edit your code to make the dd, or the second bit of information, show up in a different div that I already have set up. Instead of an absolute position is what I'm trying to say...
I have a div as a left-hand column with thumbnails(the dt) and once clicked I would like it to show the enlarged version (the dd) in a separate div in a middle column.
Tried throwing some extra css in there divName.abs (where divName is my previously set up div), but to no avail. Do you have any suggestions? Hopefully my rambling made some semblance of sense!!
Lisztomania,
Can you post a link to your page or maybe send it to me via the contact form? I can have a look and see if I can help.
Hello BonRouge,
I've been searching for something like this for months now and I came here by accident, but I'm glad that I did.
This is a perfect tutorial but what I had in mind is kind of similar but not this.. (the problem is that when the mind is made up on something it won't let it go...)
I am just wondering, and I know deep inside that is possible, I just don't have the knowledge to do it myself yet.. but:
I want to set up 4 link menu more like a matrix. so 2 by two in lines. and there are pictures of states(active/hover/inactive) that are used respectably. And when it's clicked it displays text bellow all 4 menu-links.
I'll keep on working on this of course, just thought if you see this before I figure it out and gimme some clues.
Thanks a lot for your tutorials they are truly amazing. Bookmarked it right away and I will most definitely come back to read through this site often. 
Some of them should have been simpler and thus less confusing. Thank you for the playaround of the JS script on toggle, though. I've learnt a lot from your playing with the scripts.
A question:
In the first example "hi":
I'd like to ask why we need
next=next.nextSibling;
You've already defined next = el.nextSibling
So what is next.nextSibling (el.nextSibling.nextSibling)?
And,
toggleNext(clicker);
why do we need this after you've already had toggleNext(this) just before?
I hope you can still help me out here though I know it's already too late for this post. Long time ago.
Thank you.
Hi Bon Rouge,
I have a web site:
http://www.tech4t.co.uk/territorymapping/pentagon/index.htm
And I have used your image switching js to switch the images on click. Now if I wanted to remember a users preference of on/off so that if they selected on at the top level that the shading would stay on for the rest of the session could I do that with any of the scripts that you have on this page.
Thanks in advance you really have helped me a lot with html and javascript over the last couple of years
gud.. one..
nice......
you're excellent.
descriptive essay <a href="https://essaymetals.com/ ">essay writers</a> essay format example
loop diuretics furosemide <a href="https://lasixona.com/ ">furosemide 40 mg diuretic</a> furosemide no prescription
Wow, that is cool, but confusing