...

View Full Version : Show/Hide element?



Majoracle
02-20-2007, 09:50 PM
Alright, I got the basic idea (which is relatively easy):


function show_el(id)
{
var obj = document.getElementById(id);
obj.style.display = "block";
}
function hide_el(id)
{
var obj = document.getElementById(id);
obj.style.display = "none";
}

The problem is, you need 2 different links, one to show the element, one to hide it. What I want is one link that changes depending on whether or not the element is showing: If it's showing, the link will be "Hide Element", if it's not, it'll be "Show Element."

I've seen this done a lot, mainly in expanding/collapsing, which is basically what I'm doing. I imagine it's not all that hard, but I just can't seem to figure it out.

Thanks.

Bill Posters
02-20-2007, 10:00 PM
css +

.hide {
display: none;
}

js +

function toggle_el(id) {
var obj = document.getElementById(id);
obj.className = (obj.className == 'hide') ? '' : 'hide';
}

It's recommended that you try to avoid making direct presentational adjustments in the js. Add rules to the CSS and use js to adjust class attribute values, as above.

Ideally, you'd use js functions which can account for the possible presence of existing class attributes. I can show you how, if you're interested.

Majoracle
02-20-2007, 10:03 PM
Ideally, you'd use js functions which can account for the possible presence of existing class attributes. I can show you how, if you're interested.

Thank you, and yes, please do.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum