SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Retrieving every ID within a DIV...

    I have a function that makes an accordion menu. It's really handy because it saves a lot of real estate and provides a neat little piece of eye-candy for the end-user. Unfortunately, as it stands, it only accepts 1 ID for a single DIV of which to apply this menu to and I really need it to instead be applied to multiple DIVs within the DIV that makes the initial call of the function...

    I'll elaborate...

    The calling function is this:
    Code:
    function runAccordion(index){
      var nID = "comments";
      if(openAccordion == nID)
        nID = '';
      setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
          + openAccordion + "','" + nID + "')", 33);
      openAccordion = nID;
    }

    This function is called by an onclick method appended to an anchor / link. When the anchor / link is clicked on, this function makes the DIV that has the ID assigned within the variable nID "expand." So in other words, if there's a DIV with the ID of "comments" (like above), this calling function would make that DIV drop down to a designated height found in the external CSS file... Pretty straightforward.

    What I would like to do is create a single function that initializes 1 array that contains the other DIV IDs that I would like to apply this menu system to. So for example, I would like to assign this aforementioned array the IDs of "updates", "downloads", etc. to provide the visitor with a collapsible menu system and by simply making 1 function that can accept the IDs seems like a good idea, right? Feedback on this is appreciated, too.

    So anyway, how could I do this? I know it would have something to do with getElementById() and maybe 1 FOR loop, but the rest is a bit vague...

    Any help on this would be appreciated.

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I don't suppose you're using jQuery anywhere? If so you could use the Accordion UI widget

    That aside, I think one of the areas where you can probably improve is by giving each collapsible element a class, that way you will have 1 class to target all of them.

    In any case, why not do something like this:
    Code JavaScript:
    function runAccordion(index, nID){
    	if(openAccordion == nID) {
    		nID = '';
    	}
    	setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + 
    		",'" + openAccordion + "','" + nID + "')", 33);
    	openAccordion = nID;
    }

    So instead of having an array of IDs, just pass in the "nID" to the click handler.

    To be honest, it would probably be really beneficial to you to use a library like jQuery or Dojo - if you're going to be doing DOM manipulation + effects then there you have 2 really good excuses to start using a library that abstracts it all way from you and reduces the amount of code you have to write. (And less cross-browser worries for you as well!)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,711
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    John, that did it! You are the man! :.)


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
  •