SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    getElementById problem in FAQ dropdown

    Hi,

    I'm having a lot of difficulty getting a little FAQ dropdown javascript to work properly because of, I think, getElementById. Don't know much about java, just trying to get this script to work, so would really appreciate your help.

    On the actual FAQ page I want to split the FAQ into two areas: one for visitors and one for members. So the html there is just a simple thing like --

    Code:
    <h3>FAQ For Visitors</h3>
    
    <dl id="faq"><dt>Question?</dt>
    <dd>Answer</dd>
    </dl>
    
    <h3>FAQ For Members</h3>
    
    <dl id="faq"><dt>Question?</dt>
    <dd>Answer</dd>
    </dl>
    Obviously, the H3 breaks up the dl and then the FAQ for members part gets cracked. And because getElementById only works on one ID, I can't get it to also pass the script's functionality to the second FAQ section.

    The actual javascript is --

    Code:
    function toggle(obj) {
    // Moz. or IE
    var sibling=(obj.nextSibling.nodeType==3)? obj.nextSibling.nextSibling : obj.nextSibling;
    // hide or show
    if(sibling.style.display=='' || sibling.style.display=='block') {
    	sibling.style.display='none';
        obj.firstChild.firstChild.data='+';
        }
    else {
    	sibling.style.display='block';
        obj.firstChild.firstChild.data='-';
        }
    }
    //
    function initCollapse() {
    var oDT=document.getElementById('content').getElementsByTagName('dt');
    for (var i=0; i < oDT.length; i++) {
    	oDT[i].onclick=function() {toggle(this)};
        var oSpan=document.createElement('span');
        var sign=document.createTextNode('+');
        oSpan.appendChild(sign);
        oDT[i].insertBefore(oSpan, oDT[i].firstChild);
        oSpan.style.fontFamily='monospace';
        oSpan.style.paddingRight='0.5em';
        oDT[i].style.cursor='pointer';
        toggle(oDT[i]);
    	}
    oDT=null;
    }
    window.onload=function() {if(document.getElementById && document.createElement) {initCollapse();}}
    //-->
    Is there any other way to make this work the way I want? Thanks.

  2. #2
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    Two things to start with:

    1) java is not the same as javascript
    2) IDs should be unique (as you already stated), so having two ids 'faq' on the page is incorrect.

    Does the toggle functionality work in the first DT?

    What browser are you using? I just tried this in Firefox 5 on Linux, and it works fine (even with the incorrect id="faq" issue).

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Functionality works on the first DT. Using IE8. It also doesn't work on FF3.

    Thanks.

  4. #4
    SitePoint Wizard bronze trophy Immerse's Avatar
    Join Date
    Mar 2006
    Location
    Netherlands
    Posts
    1,661
    Mentioned
    7 Post(s)
    Tagged
    1 Thread(s)
    I can't really help you with IE8, as I'm on Linux and can't run IE (yay!).

    As for FF3, I'd suggest upgrading it to the newest version (which is 6.0 since today). Firefox 3 probably isn't used by all too many people anymore.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    The code works for me, even with the faq id removed, once the HTML is placed within a div with an id of "content"
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    The code works for me, even with the faq id removed, once the HTML is placed within a div with an id of "content"
    Sorry I haven't visited the thread for a while. Other pots were boiling. Paul, that really helped! Thanks. I'd actually made an error in my OP, putting "faq" in the DL but "content" in the script. But what you said really helped. I wrapped the entire area in a div id'd "faq" and removed "faq" from both DLs so that it's two vanilla DLs separated with an H3 (or whatever else I want to do) and it works a treat. Thanks a lot.


Bookmarks

Posting Permissions

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