www.webdeveloper.com
Page 6 of 6 FirstFirst ... 456
Results 76 to 90 of 90

Thread: Expand/Collapse Paragraph

  1. #76
    Join Date
    Jun 2011
    Posts
    6
    Quote Originally Posted by nonsub View Post
    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. #77
    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">

    <head>
    <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>

    </head>

    <body onload="allOff('qa')">


    <a onclick="return toggleMe('qa1')" href="#">Question 1<br></a>

    <a onclick="return toggleMe('qa2')" href="#">Question 2<br></a>

    <a onclick="return toggleMe('qa3')" href="#">Question 3<br></a>


    <div id="qa1">

    Answer 1 <br />

    </div>
    <br>

    <div id="qa2">

    Answer 2 <br />

    </div>
    <br>

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

    </body>


    </html>

  3. #78
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391
    What version of the code in this long thread are you using? Post #63 or something modified since then?

    Answered your own question while I was typing mine.
    Last edited by JMRKER; 06-06-2011 at 11:43 AM. Reason: Resolved???

  4. #79
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391
    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. #80
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Lightbulb 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">
    <head>
    <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() {
      var sel = document.getElementById('answerSection').getElementsByTagName('div');
      for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
    }
    onload = function() { allOff(); }
    /*]]>*/
    </script>
    
    </head>
    <body>
    
    <a onclick="return toggleMe('qa1')" href="javascript:void(0)">Question 1</a><br>
    <a onclick="return toggleMe('qa2')" href="javascript:void(0)">Question 2</a><br>
    <a onclick="return toggleMe('qa3')" href="javascript:void(0)">Question 3</a><br>
    
    <div id="answerSection"> <p>
    <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. #81
    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. #82
    Join Date
    Jun 2011
    Posts
    6
    in fact I have a feeling this could be accomplished just with css?

  8. #83
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Lightbulb

    Quote Originally Posted by nonsub View Post
    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.

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

  9. #84
    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. #85
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Question Huh? ...

    Comments in RED below:

    Quote Originally Posted by nonsub View Post
    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 03:45 PM.

  11. #86
    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. #87
    Join Date
    Oct 2011
    Posts
    2
    Never mind. Answered my own question. Thanks for the script!

  13. #88
    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. #89
    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>
    <input type="button" onclick="return toggleMe('para1')" value="Toggle">
    <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>
    <input type="button" onclick="return toggleMe('para1')" value="Toggle">
    <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>
    <input type="button" onclick="return toggleMe('para1')" value="Toggle">
    <br>

  15. #90
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391
    You should start your own thread instead of posting to a 9 year old thread.
    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">
    <head>
    <meta charset="UTF-8" />
    <title> Toggle DIV section </title>
    <style type="text/css">
     .More { display:block; }
     .Less { display:none; }
    </style>
    </head>
    <body>
    
    <br>
    First line First line First line First line First line First line First line First line First line
    <input type="button" onclick="return toggleMe('para1')" value="Toggle">
    <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
    <input type="button" onclick="return toggleMe('para2')" value="Toggle">
    <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
    <input type="button" onclick="return toggleMe('para3')" value="Toggle">
    <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 08:11 PM.

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles