Using the DOM to show or hide a <br /> tag.

Hi All,

I’ve got a bit of code in a form which shows, or hides, a label and its corresponding input / selectbox, depending on whether or not it has been selected.

Each element in the form is seperated by a <br /> tag, (to which I’ve assigned a style of “clear:both;” ). I use this to line up each elements using CSS, instead of tables.

…So far, so good….

However, the problem I was recently having was that when an element was hidden, the <br /> which followed was still displayed – resulting in a lot of “blank” space – not very pretty.

As a result, I’m trying hide the appropriate <br />’s, and only show them when necessary.

The problem is, although I have managed to get the appropriate <br />’s to hide, I can’t seem to get them to “reappear” or to reinsert the “clear:both” style which I need to ensure the rest of the form lines up correctly.

Here’s the code I’m using so far to show / hide the form elements and the corresponding <br />

[code]function showstuff(level){
document.getElementById(‘level_’+level).className=”levelshow”;
form.getElementsByTagName(“label”)[level].className=”labelshow”;
var aBr=form.getElementsByTagName(“br”);
for(var i=1; i<aBr.length; i++)
if (i<4)
{
aBr[i].className=”brshow”;
}
}

function hidestuff(level){
var aLabel=form.getElementsByTagName(“label”);
for(var i=level; i<aLabel.length; i++)
if (i<4)
{
document.getElementById(‘level_’+i).className=”levelhide”;
aLabel[i].className=”labelhide”;
}
var aBr=form.getElementsByTagName(“br”);
for(var i=1; i<aBr.length; i++)
if (i<4)
{
aBr[i].className=”brhide”;
}
}[/code]

What happens is that the <br />’s are removed, but I don’t seem to be able to get them reinstated when required. This means that the following form elements float incorrectly.

Does anyone have any ideas where I may be going wrong?

Oh yeah, and here are the styles: ?

.brshow {display:block; clear:both;}
.brhide {display:none;}

Cheers
Kessa

Also in #JavaScript _↴