Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Expandable forms using DIV and SPAN tags???

Status
Not open for further replies.
Albuckj2

Albuckj2

Programmer
Jan 7, 2003
68
0
0
GB
Hi,
I need to build a user form which allows the input of certain figures. The form will be split into 3 sections, and I want each section to be accessible by clicking on the headings and the input places then appear below. I want to use tables to line everything up.

Below is what I want it to look like.

[-]Financials
Sales [then a drop-down select menu here, and then 2 other text input fields on the same row]
Revenue [then a drop-down select menu here, and then 2 other text input fields on the same row]
[+]Employees
[+]Headquarter details

Someone produced the following example for me using SPAN and DIV tags:

<HTML>
<HEAD>
<TITLE>Collpsible</TITLE>
<STYLE>

SPAN {font-size: 18pt; cursor: hand}
.on {display: on}

</STYLE>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
// Set bSupportsDHTML to true for Internet Explorer 4 or later.
var bDoesDHTML = ( (navigator.userAgent.indexOf(&quot;MSIE&quot;) >= 0) &&
(navigator.appVersion.substring(0,1) >= 4) )

// Only hide menu items if browser supports DHTML.
if(bDoesDHTML){document.write(&quot;<STYLE>.off{display:none}</STYLE>&quot;)}

function doSect(secNum){
if (bDoesDHTML){
//display the section if hidden; hide it if it is displayed
if (secNum.className==&quot;off&quot;){secNum.className=&quot;on&quot;}
else{secNum.className=&quot;off&quot;}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>

<SPAN onclick=&quot;doSect(Test)&quot;><B>Main Chapter</B></SPAN><BR>
<DIV CLASS=&quot;off&quot; ID=&quot;Test&quot;>
<A HREF=&quot;some.htm&quot;>Chapter 1</A><BR>
<A HREF=&quot;some.htm&quot;>Chapter 2</A><BR>
<A HREF=&quot;some.htm&quot;>Chapter 3</A><BR>
<A HREF=&quot;some.htm&quot;>Chapter 4</A><BR>
</DIV>

</BODY>
</HTML>

This works and I tried to implement it into a small example of mine below, without success!!


<html>
<head>
<title>Example Menu</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
</head>

<body>
<FORM ACTION=&quot;page2d.asp&quot; METHOD=&quot;post&quot; NAME=&quot;main1&quot;>
<table width=&quot;100%&quot; border=&quot;0&quot;>
<tr>
<td width=&quot;8%&quot; height=&quot;54&quot; colspan=&quot;6&quot;>
<SPAN onclick=&quot;doSect(Test)&quot;><b> Main Menu </b></SPAN>
</td>
</tr>
<tr>
<td width=&quot;8%&quot; height=&quot;54&quot;> <DIV CLASS=&quot;off&quot; ID=&quot;Test&quot;>
<font face=&quot;Times New Roman, Times, serif&quot; size=&quot;2&quot;><b> Market Size </b></font><BR>
</td>
<td width=&quot;12%&quot;>
<font face=&quot;Times New Roman, Times, serif&quot; size=&quot;2&quot;><b>
<select name=&quot;mkt_cap&quot; onChange=&quot;check2(this.form.mkt_cap, this.form.mkt_min, this.form.mkt_max)&quot;>
<option value=&quot;A&quot;>Any</option>
<option value=&quot;1&quot;>£0-500m</option>
<option value=&quot;2&quot;>£500m-£1bn</option>
<option value=&quot;3&quot;>£1bn+</option>
</select>
</b></font></td>
<td width=&quot;4%&quot;><b><font face=&quot;Times New Roman, Times, serif&quot; size=&quot;2&quot;>OR</font></b></td>
<td width=&quot;22%&quot;> <font face=&quot;Times New Roman, Times, serif&quot; size=&quot;2&quot;><b>Min:
<input type=&quot;text&quot; name=&quot;mkt_min&quot; maxlength=&quot;6&quot; size=&quot;15&quot; onChange=&quot;checkdata(this.form.mkt_cap, this.form.mkt_min)&quot;>
million </b></font></td>
<td width=&quot;22%&quot;> <font face=&quot;Times New Roman, Times, serif&quot; size=&quot;2&quot;><b>Max:
<input type=&quot;text&quot; name=&quot;mkt_max&quot; maxlength=&quot;6&quot; size=&quot;15&quot; onChange=&quot;checkdata(this.form.mkt_cap, this.form.mkt_max)&quot;>
million </b></font></td>
</DIV>
</tr>
</table>
</form>
</body>
</html>

The closing div tag doesn't seem to work. Have I just placed the Div tags in the wrong positions???

Cheers for any help at all.
 
Sort by date Sort by votes
Just after I've opened the td, on this line:

<td width=&quot;8%&quot; height=&quot;54&quot;> <DIV CLASS=&quot;off&quot; ID=&quot;Test&quot;>

I've also tried opening and closing before the <td>, and even before the <tr>, but neither work.
 
Upvote 0 Downvote
It looks like a nesting problem to me.
If you want to have the DIV include an entire row of TDs, open the DIV immediately after the TR tag. Do not put it in one of the TDs.
i.e. Try
Code: 
<tr>
         <DIV CLASS=&quot;off&quot; ID=&quot;Test&quot;>
         <td> . . .</td>
         <td> . . .</td>
         <td> . . .</td>
         </DIV>
    </tr>

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
215
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
64
lmcate
lmcate
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
135
198709km
198709km
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
154
PeDa
PeDa
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
141
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top