Help with javascript toggle display script

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Hi all,

I need help with a javascript I'm using to toggle layers on and off. You can see the effect on the first few links here:

http://www.housing.uwaterloo.ca/getready4rez/faq/faq6b%20-%20javascript%20toggle.html

I borrowed the script from another site. The javascript that is doing the toggling is here:

function displayToggle(nr){
if (document.all)
document.all[nr].style.display = (document.all[nr].style.display == 'none') ? 'block' : 'none';
else if (document.getElementById)
document.getElementById(nr).style.display = (document.getElementById(nr).style.display == 'none') ? 'block' : 'none';
}
'

The problem I'm having right now is that you have to double click on the links to get the toggle to work. This is probably because I've got the display: none set in the CSS. What I want to do is move that original display:none into the javascript somehow (so that users without javascript will still see all the content). The javascript would then hide all the answers and display them when the links are clicked on.

Can anyone help? By the way, I'm writing an article about how I created this page, to be published on our new content site. If you help I'll give you credit in the article Smiling

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I also wouldn't mind some comments on the usability of that page. I'm not sold on doing it that way - a simple list with target links might work better (but this is fun to play with if nothing else!).

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Yay! Fixed it! The secret was the getElementsByTagName property and learning that it puts the elements into an array. All fixed Smiling

I'd still appreciate comments on the usability of this page Smiling

He has: 1,758 posts

Joined: Jul 2002

I really like it megan.

On FAQ pages I always like being able to see all the questions and answers together so I can just scroll through and read them all at the same time. It's better than the method of listing all of the questions at the top and using anchors to take people down to the questions.

I absolutely hate it when the questions are on one page and they take you to another for the answer.

I really do think you've found one of the most usable ways to display a FAQ page. Well done! Laughing out loud

Andy

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.