SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Toggle Function

  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Toggle Function

    I am wanting to create a toggle function that can toggle objects (expand/shrink) like you see on different forums. I have created the following ...
    Code:
    function toggle(obj1, obj2) {
    	var el = document.getElementById(obj1);
    	if ( el.style.display != 'none' ) {
    		el.style.display = 'none';
    		obj2.src = 'Themes/Default/Images/category_expand.png';
    	}
    	else {
    		el.style.display = '';
    		obj2.src = 'Themes/Default/Images/category_shrink.png';
    	}
    
    }
    but when i check to see if it is valid I get the following warning...
    Code:
    Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementByID() instead.
    I have tried the following and it didn't work...
    Code:
    function toggle(obj1, obj2) {
    	var el = document.getElementById(obj1);
    	var el = document.getElementById(obj2);
    	if ( el.style.display != 'none' ) {
    		el.style.display = 'none';
    		el2.src = 'Themes/Default/Images/category_expand.png';
    	}
    	else {
    		el.style.display = '';
    		el2.src = 'Themes/Default/Images/category_shrink.png';
    	}
    
    }
    (obj1 is a table and obj2 is an image)
    I think it may be the el2.src (I may need to grab the image source using something else?)

    Any help will be appreciated!

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You are getting the first error, since you are not using document.getElementById to access the html node (obj2).

    In your second example, you overwrite the variable el, is this correct?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No I use el and el2 I forgot the 2 when i posted it looks like this...
    Code:
    function toggle(obj1, obj2) {
    	var el = document.getElementById(obj1);
    	var el2 = document.getElementById(obj2);
    	if ( el.style.display != 'none' ) {
    		el.style.display = 'none';
    		el2.src = 'Themes/Default/Images/category_expand.png';
    	}
    	else {
    		el.style.display = '';
    		el2.src = 'Themes/Default/Images/category_shrink.png';
    	}
    
    }
    I think the issue may be the el2.src (i may need to get the src of the image differently)

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How does the above fail? What does the JavaScript console in Firefox say?

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the el2.src is the src of the image which changes from a - to a + (shrink/expand) and the error is..
    Code:
    el2 has no properties


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
  •