Page 1 of 1
How to group element in HTML besides DIV tag?
Posted: Mon Jan 17, 2005 12:45 pm
by myleow
Are there a different tag other than DIV that can group elements together?
I am trying to make a Collapsable/Expandable input form with Required fields always visible even after that portion is collapsed.
I want to be able to display REQUIRED input fields even after it is collapsed.
Anyone know how to do this?
Posted: Mon Jan 17, 2005 1:08 pm
by feyd
any container tag groups things together.. span is often used, other than div.
As for only hiding the elements deemed optional.. seperating each group of elements by div or span can allow this to happen fairly easy:
untested
Code: Select all
function getElem(id)
{
return document.getElementById ? document.getElementById( id ) : document.allї id ];
}
function toggleGroup(prefix)
{
var obj = getElem(prefix);
if(obj) // do a single hide
{
obj.style.display = (obj.style.display == 'none' ? 'block' : 'none');
return;
}
var counter = 0;
while(obj = getElem(prefix + counter))
obj.style.display = (obj.style.display == 'none' ? 'block' : 'none');
return;
}
...
<div id="hidable0"><input type="text" name="foo1" /><br />
<input type="radio" name="bar1" value="larry" /></div>
<div id="hidable1"><input type="radio" name="bar1" value="curly" /><br />
<input type="radio" name="bar1" value="moe" /><br />
<input type="radio" name="bar1" value="shemp" /></div>
<input type="password" name="pass" />
<div id="hidable2"><input type="button" value="hidable button" /></div>
<a href="javascript:toggleGroup('hidable')">Toggle display</a><br />
<a href="javascript:toggleGroup('hidable2')">Toggle button display</a>
Posted: Mon Jan 17, 2005 10:29 pm
by myleow
ok been messing with it for a while.
How i am making the Input Form is using Table to represent each set of information. Using table because i need to set the space to a % of the screen, etc.
For Simplicity there are 2 tables.
Login Information && Personal Information.
What i can do now is Collapse and Expand the entire table for Login or Personal, which is basically what Feyd's code does.
Example in Personal Information, i have First Name, Last Name. Given that Personal Information is a Table with 2 rows and 2 columns and First Name is a required field. I want to collapse the whole thing but First Name still appears without leaving an empty space.
Enclosed the Code below. JS is similar to Feyd's.
Code: Select all
<fieldset><legend>Personal Information</legend>
<div align="right"><script type="text/javascript">document.writeln('<img id="personalimage" src="open.bmp" width="25" width="25" alt="more" onclick="toggle(''personalimage'',''personalinfo'');">');</script></div>
<div id="personalinfo">
<table>
<tr>
<td width="30%">First Name:<font style="color:orange">*</font></td>
<td><input class="input_box" type="text" name="firstname" maxlength=50 value=""/></td>
</tr>
<tr><td width="30%">Last Name</td>
<td><input class="input_box" type="text" name="lastname" maxlength=50 value=""/></td>
</tr>
</table>
</div>
</fieldset>
I tried putting the DIV inside the <table> but that doesn't work. The only thing that works is putting DIV inside a CELL but that collapse the cell leaving an empty white space there. What i need is collapse the entire ROW or rather make First Name's ROW visible when i collapse the entire TABLE.
Regards
Mian
Posted: Mon Jan 17, 2005 10:53 pm
by feyd
from what I remember, you can give an id to rows, and control their display the same as any other container.