problem with a show/hide toggle thing (JS)

original script // modified script // modified script in action

problem ==> loses this important feature:

It degrades nicely (hidden elements are visible in script-disabled UAs).​

if you view the modified script with JS disabled, it just comes out as a list with no way to view the <dd> contents. the original one however comes out best with all <dd>'s displayed, <dt>'s are not links, and there are no open all/close all links.

i took a look at the script which was pretty useless coz i have no idea what im looking at, so i'd really appreciate any help on this one.

and also it would really really great if someone could help and have an open all/close all for each <dl>, coz so far when i try to use the script, i can only have one pair of open all/close all links and they open/close everything instead of that one particular list under one heading.

thanks in advance!!

 

In order to make the open/close for the separate sections you could do it similar to this (be aware that I'm writing this from the top of my head, I haven't had the chance to test it, but I this it "should" work):

function TJK_ToggleDLopenSection(section){//we open all of them
    var tmp = section;
    var zDD=document.getElementById(tmp).getElementsByTagName('dd');
    var zDT=document.getElementById(tmp).getElementsByTagName('dt');	
    for(var i=0;i<zDT.length;i++){
        zDD[i].className='showDD';
        zDT[i].className='DTminus';
    }
    return false;
}

Code (markup):

I guess that's about it to open a specific section. You would have to pass the correct section id to the function and do this for all the links on your page.
You could also do this with javascript and save yourself the tedious work when you add new sections.

As for not degrading, yeah, all you have to do is set the hidden CSS property in javascript and not in the CSS declaration.

Hope this helped.

 

how do i do this? do i copy/paste what you've just given and then what...? does that automatically put open all/close all links in the page under each heading?

what's in the the CSS right now is this:

dd,.hideDD{top:-9999px;position:absolute}

Code (markup):

without it, the <dd> elements show, even with JS enabled. how do i set the hidden CSS property in the JS so that it degrades properly? and for the CSS, do i just delete the above, nothing else i need to replace it with?

thanks!