www.webdeveloper.com
Results 1 to 8 of 8

Thread: Toggle Elements

  1. #1
    Join Date
    May 2003
    Location
    UK
    Posts
    220

    Toggle Elements

    Hiya

    I need to toggle 2 different elements at the same time; one div and one img.

    Obviously I can't give 2 elements the same ID so is it possible to use getElementByID to find what element IDs begin with something, as I could give the div id="ID1_div" and the img id="ID1_img".

    Then put ID1_ in the function?

  2. #2
    Join Date
    Dec 2007
    Location
    Dayton, OH
    Posts
    390
    That would work. For JavaScript stuff I highly recommend downloading a JavaScript framework to make life easier for you.

    Prototype, or JQuery makes this sort of thing mind numbingly easy because it allows you to pull in elements by CSS (class, CSS selectors).

  3. #3
    Join Date
    Feb 2006
    Posts
    2,927
    getElementById will only return a single element with the id used for its argument.


    Code:
    getElementsWithPrefix= function(prefix, tag){
        var A= [], temp;
        for(var i= 1, L= arguments.length; i< L; i++){
            temp= document.getElementById(prefix+arguments[i]);
            if(temp) A[A.length]= temp;
        }
        return A;
    }
    var elements=getElementsWithPrefix('ID1_','img','div');


    It may be more to the point to assign the elements a class and return all elements with that class name.
    Last edited by mrhoo; 03-27-2009 at 01:45 PM.

  4. #4
    Join Date
    May 2003
    Location
    UK
    Posts
    220
    Thanks.

    I didn't think there was a getElementByClass method available, although I last checked a couple of years ago!

    I should have added that I want the img src to change and the div display to change. Basically, when a div is hidden I want the image to show as an expand image, and when the div is shown I want the image to show as a collapse image.

    If you goto http://uk.msn.com/, over on the right there is a Windows Live Mail 'module', which is collapsable and expandandle; this is what I want to achieve.

    Thanks
    Last edited by ldoodle; 03-28-2009 at 09:41 AM.

  5. #5
    Join Date
    May 2003
    Location
    UK
    Posts
    220
    OK, i've come up with this so far; it's not working for the image but is working fine for the table.

    The image always 'shows' as collapse.png. I've added the alert so I can see what's happening:

    Code:
    function toggle(Id)
    {
    
     var imageId = Id + "Image";
     var tableId = Id + "Table";
    
     var image = document.getElementById(imageId);
     var table = document.getElementById(tableId);
    
     var newImage = image.src == "/images/expand.png" ? "/images/collapse.png" : "/images/expand.png";
     var newStyle = table.style.display == "none" ? "block" : "none";
     alert(newImage)
    
     image.src = newImage;
     table.style.display = newStyle;
    
    }
    Thanks..

  6. #6
    Join Date
    May 2003
    Location
    UK
    Posts
    220
    OK, getting closer; when using absolute paths for the images it works, but this isn't workable as i'd have to re-code the absolute paths when moving to production.

    Any ideas?

    Thanks

  7. #7
    Join Date
    Jun 2007
    Posts
    667
    Code:
    var newImage = image.src.match("/images/expand.png") ? "/images/collapse.png" : "/images/expand.png";

  8. #8
    Join Date
    May 2003
    Location
    UK
    Posts
    220
    Thanks will bare that one in mind.

    Have settled on the following, which works absolutely perfect. Not sure what's quicker between .match and .indexOf.

    Code:
    <!--
    
    function toggle(Id)
    {
    
     var imageId = Id + "Image";
     var tableId = Id + "Table";
    
     var image = document.getElementById(imageId);
     var table = document.getElementById(tableId);
    
     var newImage = (image.src.indexOf("/images/expand_module.png") != -1) ? "/images/collapse_module.png" : "/images/expand_module.png";
     var newAltText = image.alt == "Collapse " ? "Expand " : "Collapse ";
     var newTitle = image.title == "Collapse this module " ? "Expand this module " : "Collapse this module ";
     var newStyle = table.style.display == "none" ? "block" : "none";
    
     image.src = newImage;
     image.alt = newAltText;
     image.title = newTitle;
     table.style.display = newStyle;
    
    }
    
    -->

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 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