SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show/Hide (Toggle) Question

    Hi All,

    I'm trying to get this script to work:

    Code:
    <script language="javascript" type="text/javascript">
    function toggle(item) {
    	obj=document.getElementById(item);
    	visible=(obj.style.display!="none")
    	key=document.getElementById("collapse_" + item);
    	if (visible) {
    	obj.style.display="none";
    	key.innerHTML="[+] Expand";
    	}
    	else {
    	obj.style.display="block";
    	key.innerHTML="[-] Collapse";
    	}
    }
    </script>
    Here is my current HTML:

    Code:
    <a id="collapse_collections" href="javascript:toggle('collections')">[+] Expand</a><br />
    <div id="collections" style="display:none"><a href="/site/interests/collections/books">Books</a><br />
    <a href="/site/interests/collections/magazines">Magazines</a><br />
    <a href="/site/interests/collections/movies">Movies</a><br />
    <a href="/site/interests/collections/music">Music</a><br />
    <a href="/site/interests/collections/video_games">Video Games</a><br />
    <a href="/site/interests/collections/wristwatches">Wristwatches</a><br />
    </div>
    Right now, when I expand/collapse, the links are showing up as [+] Expand or [-] Collapse. However, I'd like to be able to put any text after "Expand" or "Collapse" and include it as part of the link, so that it could be like so:

    [+] Expand Music
    [+] Collapse Music
    [+] Expand Video Games
    [+] Collapse Video Games

    etc. The key is probably in this part of the JS:

    Code:
    key.innerHTML="[+] Expand";
    key.innerHTML="[-] Collapse";
    However, I'm a JS n00b, and am not sure how to do this... If someone could help me, I'd really appreciate it! Thanks in advance...

  2. #2
    SitePoint Evangelist vikrantkorde's Avatar
    Join Date
    Jun 2004
    Location
    Mumbai, India
    Posts
    541
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    use this code
    Code:
    <script language="javascript" type="text/javascript">
    function toggle(item, itemName) {
        obj=document.getElementById(item);
        visible=(obj.style.display!="none")
        key=document.getElementById("collapse_" + item);
        if (visible) {
        obj.style.display="none";
        key.innerHTML="[+] Expand " + itemName;
        }
        else {
        obj.style.display="block";
        key.innerHTML="[-] Collapse " + itemName;
        }
    }
    </script>
    and

    Code:
    <a id="collapse_collections" href="javascript:toggle('collections', 'Books')">[+] Expand Books</a><br />
    <div id="collections" style="display:none"><a href="/site/interests/collections/books">Books</a><br />
    <a href="/site/interests/collections/magazines">Magazines</a><br />
    <a href="/site/interests/collections/movies">Movies</a><br />
    <a href="/site/interests/collections/music">Music</a><br />
    <a href="/site/interests/collections/video_games">Video Games</a><br />
    <a href="/site/interests/collections/wristwatches">Wristwatches</a><br />
    </div>
    here I am just passing the itemname in the JS function.
    Vikrant Korde
    S Y S T I M E, Mhape,
    Mumbai, Maharashtra, India.

  3. #3
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Vikrant!!! So greatly appreciated!

    I also have one more question. Not sure why, but it seems like when I call style="display:none" from an external style sheet, the "toggle" function doesn't work unless I click twice.

    I'd be calling it like so from within styles.css:

    #collections {
    display: none;
    }


    However, when I include style="display:none" locally, like so:

    <div id="collections" style="display:none"></div>

    Everything works fine on the first click...


    Does anyone know why this might be? The code should work regardless of whether the CSS is called locally or externally, correct?

  4. #4
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone have any idea about my second question?

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes.

    The style property of an object does not include the CSS inherited stuff, so if I have:

    thing {
    display:none;
    }
    ...
    <div class="thing"></div>

    if I test the style.display property of my div, it will be an empty string, even though visibly it is not displayed.

    Ways to fix this:
    - set the display property as part of the style attribute on the object
    - use currentStyle (ie) and getComputedStyle (ff) to determine whether or not the object is displayed

  6. #6
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much, Jim. Really appreciate it. Seems like the easiest way to go is just set the display property as part of the style attribute on the object.


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
  •