How do I link to an already expanded list?

[TheRealist]

I have an expandable list on my new website, which lists a number of website FAQs. Upon clicking on a question, a simple Javascript expands the list to reveal the answer.

I want to be able to create links on other pages that will open the FAQ page, with a particular question already expanded. I can link to each question easily enough (because each one is uniquely identified), but I don't know how to get the link to expand a specified question.

I do not know much about this kind of stuff, and the script I use to expand/collapse (from my FAQ page, shown below) was provided by a friend:

function toggleExpandCollapse(ID,toggle)
{var server = top.location.host;
var doChgImg = (document.getElementById(ID).src=='http://'+server+'/_derived/Expand_btn.gif');
var swap = document.getElementById(ID);
if (doChgImg)
{swap.src='_derived/Collapse_btn.gif';}
else{swap.src='_derived/Expand_btn.gif';}
ulStyle = document.getElementById(toggle).style;
ulStyle.display == 'none' ? ulStyle.display = 'block' : ulStyle.display='none';}

 

[Lonny Earl]

Unfortunately, while this approach does work, it's rather slow. Each time the user clicks, they then have to wait for a new page to be loaded. And a great deal of information is repeated on each page in order to show the user where they are in the overall outline.

is there a better way? Fortunately, there is! We can create a fully collapsible outline that allows the user to open and close the list beneath each heading. We'll do this with dynamic HTML, also known as DHTML. The term "DHTML" refers to the things that can be accomplished using JavaScript, cascading style sheets, and the document object model that allows the two to work together.