SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best visibility toggle script?

    I'm working on a site where we need to be able to hide certain areas of content and reveal others. The page elements to be toggled can't always be put neatly in a div, e.g., some are in tabular data so they're in table cells. I've been using these functions:

    Code:
    function showHide(elementID, show)
    {
    	var el = document.getElementById(elementID);
    
    	if(show)
    	{
    		el.style.display = '';
    	}
    	else
    	{
    		el.style.display = 'none';
    	}
    
    	return false;
    }
    
    function showHideGroup(group, show)
    /*
    	Group should be an array with names of elements to hide.
    */
    {
    	for(i=0; i<group.length; i++)
    	{
    		showHide(group[i], show);
    	}
    }
    They work ok but the group one is klutzy because if you have to have EXACTLY the elements you want toggled, I think even in the correct order, although I might be wrong about that - or it doesn't work. Some of my pages might have close to 100 individual items that need to be toggled so it's been difficult to work with.

    I know there are a lot of scripts out there for visibility toggle scripts. Anyone have a favorite that they think might work well for what I'm wanting?

  2. #2
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My favorite display toggle is a switch that adds or removes a classname to a group of elements (a group can contain one element).
    The class is defined as 'hideClass{display:none}' .
    Without the class in an element's class list, the element displays normally.

    This method only works if you don't set the style display for the element inline, in the html or from a script.

    THis is suitable for rapidly toggling multiple elements onto and off of the page, with the least amount of browser stuttering as it redraws the display.

  3. #3
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure I follow. What I need is a script that will simultaneously hide some elements while revealing others. Does yours do that? If so can you post the script?

  4. #4
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry- I was misled by your screen name. I'm sure someone has a script you can cut and paste.

  5. #5
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've already found a bunch of scripts I can copy and paste so no, that's not what I'm about. The reason I came here is that there are so many visibility toggle scripts out there and I couldn't figure out which one would be best for my application. That's where my knowledge is lacking.

    I really didn't understand what you were trying to explain mrhoo - I would have needed more information to grasp it. But based on what you said about how you can't use display:none anywhere else, I wasn't sure your suggestion would work for what I need. I'm wanting to learn ABOUT the various scripts I've seen. And sometimes to learn about something, you have to see it. But no. I'm not just looking for a quick copy/paste. You may have misread my intentions.


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
  •