Hide and Show Elements by Class or ID





11
Date Submitted Fri. Feb. 23rd, 2007 1:16 AM
Revision 1 of 1
Scripter Casper42
Tags CSS | JavaScript
Comments 3 comments
There seems to be so many hide/show scripts out there, so here's the functions I wrote and use on a regular basis - there are 7 functions, hide, show and toggle by id or class - and the getElementByClass function that does not exist as a built in Javascript function...

This is in response to the flurry of visibility scripts that just don't have all the pieces needed to make them totally useful.

//  Scriptlets code written by Jeremy Edmiston
//  The functions have been adapted from various sources
//  and re-written to provide maximum flexibility
//  and compatability with various browsers.

//Global Declarations
var ie = (document.all) ? true : false;

function toggleClass(objClass){
//  This function will toggle obj visibility of an Element
//  based on Element's Class
//  Works with IE and Mozilla based browsers

  if (getElementByClass(objClass).style.display=="none"){
    showClass(objClass)
  }else{
    hideClass(objClass)
  }
}

function hideClass(objClass){
//  This function will hide Elements by object Class
//  Works with IE and Mozilla based browsers

var elements = (ie) ? document.all : document.getElementsByTagName('*');
  for (i=0; i<elements.length; i++){
    if (elements[i].className==objClass){
      elements[i].style.display="none"
    }
  }
}

function showClass(objClass){
//  This function will show Elements by object Class
//  Works with IE and Mozilla based browsers
var elements = (ie) ? document.all : document.getElementsByTagName('*');
  for (i=0; i<elements.length; i++){
    if (elements[i].className==objClass){
      elements[i].style.display="block"
    }
  }
}

function toggleID(objID){
//  This function will toggle obj visibility of an Element
//  based on Element's ID
//  Works with IE and Mozilla based browsers
var element = (ie) ? document.all(objID) : document.getElementById(objID);
  if (element.style.display=="none"){
    showID(objID)
  }else{
    hideID(objID)
  }
}

function hideID(objID){
//  This function will hide Elements by object ID
//  Works with IE and Mozilla based browsers
var element = (ie) ? document.all(objID) : document.getElementById(objID);
  element.style.display="none"
}

function showID(objID){
//  This function will show Elements by object ID
//  Works with IE and Mozilla based browsers
var element = (ie) ? document.all(objID) : document.getElementById(objID);
  element.style.display="block"
}

function getElementByClass(objClass){
//  This function is similar to 'getElementByID' since there
//  is no inherent function to get an element by it's class
//  Works with IE and Mozilla based browsers
var elements = (ie) ? document.all : document.getElementsByTagName('*');
  for (i=0; i<elements.length; i++){
    //alert(elements[i].className)
    //alert(objClass)
    if (elements[i].className==objClass){
    return elements[i]
    }
  }
}
 

Jeremy Edmiston

Comments

Comments Problem
Tue. Mar. 6th, 2007 7:12 PM    Helper albud
Comments Multiple class solution
Fri. Jan. 7th, 2011 6:03 PM    Newbie EagleBird
Comments Add
Wed. Apr. 4th, 2007 5:44 AM    Syntax Master sundaramkumar

Voting