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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hiding a large HTML section

Status
Not open for further replies.
willz99ta

willz99ta

IS-IT--Management
Sep 15, 2004
132
US
Hi and thanks for helping (or just looking),

I am trying to have a section of HTML appear when a user selects one of the options in a drop down box on my page.

Right now I am able to do this, but the code looks like junk and I know there is a better way out there somewhere.

Right now I do the job with a switch like this:


case 3:
FirstArea.innerHTML=('<select name="SelectSSShow" style="font-size:9pt" title="SelectSSShow"onChange="FuncSSShow();">'+
'<option value="-NOT SELECTED-">-Select-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>'+
'<option value="Appointment">Appointment Card</option>'+
'<option value="BusCard">Business Card</option>'+
'<option value="NewItem">New Item Request</option>'+
'<option value="ReqConv">Request Conversion</option>'+
'<option value="ReqTrial">Request Trial</option>'+
'<option value="LabCoat">Lab Coat Order</option>'+
'</select>');
break;


Do anyone know a better way?

Thanks,
Will
 
Sort by date Sort by votes
If you're wanting to nest / link select elements, take a look at faq216-6294 and faq216-4766 for some ideas.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
Hmmm, Ill look into that CSS idea (I haven't used cascading style sheets before now).

I am trying to find a way to include to include a large amount of HTML inside of a switch without the '' and + , OR another way to show/hide html from a switch statement. Maybe the CSS will do the trick.

Will
 
Upvote 0 Downvote
you really dont need to go all out on CSS .. simple functions like this will usually do you:

Code: 
<script>
function hideshow(obj)
{
  var obj = (typeof(obj)!='object') ? document.getElementById(obj) : obj;
  obj.style.display = (obj.style.display != 'none' ? 'none' : '' );
}
</script>
fed with things like :
<input type="button" onclick="hideshow(this);" value="poof!">
<br><span id="temp"> play with me!</span>
<br><input type="button" onclick="hideshow('temp');" value="toggle">

[thumbsup2]DreX
aKa - Robert
if all else fails, light it on fire and do the happy dance!
" I always think outside the 'box', because I'm never in the 'loop' " - DreX 2005
 
Upvote 0 Downvote
forgot to note, to hide large chunks, put spans on them or anchors around them, or if it's entire tables, or TR's just ID them

[thumbsup2]DreX
aKa - Robert
if all else fails, light it on fire and do the happy dance!
" I always think outside the 'box', because I'm never in the 'loop' " - DreX 2005
 
Upvote 0 Downvote
You could use a simple JavaSript to show/hide divs like so,

<head>
<script type="text/javascript">
function display(obj,id1,id2) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}

}
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
//-->
</script>

</head>
<body>
<div class="policyCol2Row3">
<select name="type" style="width:50mm" onchange="display(this,'text','image');">
<option>All Policies</option>
<option value="text">Policy Number</option>
<option value="text">Owner's Tax ID</option>
<option value="text">Owner's First Name</option>
<option value="text">Owner's Last Name</option>
</select>
</div>
<div id="text" class="policyCol2Row4" style="display:none">
<input type="text" name="color" size="25" />
</div>
</body>

 
Upvote 0 Downvote
JRye, would consider using Drexor's script rather than the ones you've posted as yours use the EVAL command which has a big overhead on performance and both do the same.


or


Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
305
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
314
malpa
malpa
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
343
xwb
xwb
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
267
Rayj0000
Rayj0000
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
699
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top