1. Registered User
Join Date
Jun 2011
Posts
6
Originally Posted by nonsub
Hi guys. Thanks for these scripts.

I would like a way to do allow only one "question" expanded. Only the question clicked should display, when another question is clicked it should collapse this one and open the next...

Thanks!
I see some of the posts should have at least pieces of this I can start trying with. To be more clear here is what I want to do.

a) On page load, nothing should be expanded

b) Questions 1, Questions 2, Questions 3.... etc.

c) When QuestionX is clicked it should apply a style to the clicked question, and expand it BELOW the list of questions and also jump to the start of that particular answer

d) Close/return should close the expanded answer and jump back to the top of the question list

lol thanks

2. Registered User
Join Date
Jun 2011
Posts
6
Well since no one answered me in 10 mins, I did it myself :P

a) Is there a way to get the divs to not "stack" spacing? ie. Each active "Answer" should start in the same spot not shifted down like they are here.

b) Any better way / more efficient code for this?

Thanks again!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<title></title>
<style type="text/css">
/*<![CDATA[*/
.hide{
display:none;
}

/*]]>*/
</style><script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
allOff('qa');
e.style.display="block"
}

return true;
}

function allOff(p,a){
for (var z0=1;document.getElementById(p+z0);z0++){
document.getElementById('qa'+z0).style.display=a?'block':'none';
}
}

</script>

<div id="qa1">

</div>
<br>

<div id="qa2">

</div>
<br>

<div id="qa3">
</div>
<br>

</body>

</html>

3. What version of the code in this long thread are you using? Post #63 or something modified since then?

Last edited by JMRKER; 06-06-2011 at 12:43 PM. Reason: Resolved???

4. Looking at your code I don't understand how you got it to work without a lot of luck...

In your funciton allOff(), you are expecting 2 parameters, but in the calls to the function you only supply one.
You're pretty lucky that the 'a' parameter always evaluates to false or you would have a problem with the ternary logic.
If you don't plan on using the missing 'a' parameter, then you could just set the display='none' instead.

5. ## Something to consider...

Slightly simplified version without the unused parameter(s)...

Also removed the extra <br> tags that were causing the answer area to scroll down.

Code:
```<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<title>Expand-Collapse FAQ</title>

<style type="text/css">
/*<![CDATA[*/
.hide { display:none; }
/*]]>*/
</style>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function toggleMe(IDS){
var e=document.getElementById(IDS);    if(!e) { return true; }
allOff();
e.style.display="block";
return true;
}
function allOff() {
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
}
onload = function() { allOff(); }
/*]]>*/
</script>

<body>

<div id="qa1"> Answer 1 <br /> </div>
<div id="qa2"> Answer 2 <br /> </div>
<div id="qa3"> Answer 3 <br /> </div>
</div>

</body>
</html>```
BTW: You should use the [ code] and [ /code] tags (without the spaces) to make your script
a little easier to read and evaluated when you post on this forum.

6. Registered User
Join Date
Jun 2011
Posts
6
lol yeah @ luck. I started mixing in variables and it broke. Thank's so much for rewriting.

a) You missed a </p> tag at the end?

b) I think there has to be a better method than letting the answersection display first and then allOff because with slow server + lots of content it will flash on the screen for a second then disappear?

7. Registered User
Join Date
Jun 2011
Posts
6
in fact I have a feeling this could be accomplished just with css?

8. Originally Posted by nonsub
lol yeah @ luck. I started mixing in variables and it broke. Thank's so much for rewriting.

a) You missed a </p> tag at the end?

b) I think there has to be a better method than letting the answersection display first and then allOff because with slow server + lots of content it will flash on the screen for a second then disappear?
<p> not really necessary and </p> not needed in HTML, only xhtml

I don't see any blinking answer displays, but if you do then just put in
Code:
```<div id="qa1" style="display:none"> Answer 1 <br /> </div>
<div id="qa2" style="display:none"> Answer 2 <br /> </div>
<div id="qa3" style="display:none"> Answer 3 <br /> </div>```
Makes the "onload=..." un-necessary, but you still need the allOff() function elsewhere.

Originally Posted by nonsub
in fact I have a feeling this could be accomplished just with css?
Just wait, the feeling will go away.

9. Registered User
Join Date
Jun 2011
Posts
6
Thanks again. Yeah I think it makes sense that on a slow host all the answers will first get listed then they will disappear no? Anyway removing the onload and replacing with the display:none works perfect.

One more question. With dynamic content I am using a header and that is where I put your function. If a page is loaded that has no answerSection elements there is a js error of course. The easy fix is a <div id="answerSection"> in the header, but what is the "proper" programatic way to do this?

Maybe enclose it in: if (document.getElementById('answerSection') != null) {....}

?

10. ## Huh? ...

Originally Posted by nonsub
Thanks again. Yeah I think it makes sense that on a slow host all the answers will first get listed then they will disappear no?
Yes, that is true.
Anyway removing the onload and replacing with the display:none works perfect.

One more question. With dynamic content I am using a header and that is where I put your function. If a page is loaded that has no answerSection elements there is a js error of course.
Why does this condition exist? Why would you load a page that did not have the answers?

The easy fix is a <div id="answerSection"> in the header, but what is the "proper" programatic way to do this?
Putting any HTML code in the <script> portion of the <head> section will cause an error.
If needed, put it where you want in the <body> section

One possibility, is to hide the answer section and only displays if you have questions???.

Maybe enclose it in: if (document.getElementById('answerSection') != null) {....}

?
Last edited by JMRKER; 06-11-2011 at 04:45 PM.

11. Registered User
Join Date
Oct 2011
Posts
2
Thanks for the code. The only issue I am having is starting it collapsed instead of expanded. Would anyone assist me in altering the original code? Thanks!

12. Registered User
Join Date
Oct 2011
Posts
2
Never mind. Answered my own question. Thanks for the script!

13. Registered User
Join Date
Oct 2011
Posts
1

## Search within the collapsed sections

Ok, so I have an XHTML page with JS using expand/collapse functionality and am needing to find a way to include a search field that will search within the document without needing to expand the sections.

It would then highlite the sections and content matching the criteria in the document/page.

14. Registered User
Join Date
Aug 2014
Posts
3
How would you make this expand and collapse all? if you had:

First line First line First line First line First line First line First line First line First line
<div id="para1" style="display:none">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<br>
<br>
First line First line First line First line First line First line First line First line First line
<div id="para1" style="display:none">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<br>
<br>
First line First line First line First line First line First line First line First line First line
<div id="para1" style="display:none">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<br>
<br>

You will get more looks by someone not wanting to slog through so many past posts.

You should also put [ code] and [ /code] tags (without the spaces) around your script
to make it easier to read, copy, test, etc. Plus it retains your formatting.

Trying to keep to your post as much as possible, consider this.
You cannot have non-UNIQUE id values.
It's like calling for 'Bob' at a convention of "Men named 'Bob'". Who knows who will answer your call!

Code:
```<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<title> Toggle DIV section </title>
<style type="text/css">
.More { display:block; }
.Less { display:none; }
</style>
<body>

<br>
First line First line First line First line First line First line First line First line First line
<div id="para1" class="Less" >
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>

<br>
First line First line First line First line First line First line First line First line First line
<div id="para2" class="Less" >
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>

<br>
First line First line First line First line First line First line First line First line First line
<div id="para3" class="Less" >
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</div>
<br>

<script type="text/javascript">
function toggleMe(IDS) {
var sel = document.getElementById(IDS);
sel.className = (sel.className == 'Less') ? 'More' : 'Less';
return false;
}
</script>

</body>
</html>```
Last edited by JMRKER; 08-05-2014 at 09:11 PM.