View Full Version : is this a good way to hide elements?

01-24-2009, 09:17 PM
hi there,

i have been writing a script that when a button is clicked, some text is hidden. then when the button is pressed again, the text re-appears.

the way i have done it is by the javascript changing the class on an element. (not directly styling it). so then there is no styling info in the javascript and a css designer does not have to edit the js (unless changing the class name).

heres the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

showHide = {

hide:'hidden', //hiding class name

changeClass:function(id) {

var e = document.getElementById(id); //get element

if (!e){return; } //if element dont exist, end script here

var currentClass = e.className //store elements class name
var hideClassLength = this.hide.length //store number of charcters in class name (needed so script dont break if class name changed)

//if the elements class name has the word 'hidden' in it (specified at the top of the script), remove all the charcters that make 'hidden' from the class name then also remove another character for the extra space character added when applying the class)
if (e.className.match(this.hide)){e.className = e.className.substr(hideClassLength+1); return; }

//if the elements class name does not equal 'hidden visible', then make it.
if (e.className != this.hide+' '+currentClass){e.className = this.hide+' '+currentClass; return; }


<style type="text/css">

body .hidden { display: none; } /* put 'body' before class name due to specificity issues (.visible display property ranking higher than .hidden display property) to make .hidden overwrite all other display styling properties */

.visible { display: block; }




<p id="para1" class="visible">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>

<a href="#" onclick="showHide.changeClass('para1')">Button 1</a>


so basically when the button is clicked, if the element is not hidden hide it (by retaining its old class name and putting a higher specified class name in front of it to overwrite it ) and if the element is hidden, simply remove the hidden class from the class name.

looking at the code above is this a good way to do this?