• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 218
  • Last Modified:

Stable Drop Down Text (eg. More Info....)

I have an events list and I'd like the option to add more details in a stable drop down style.  This is what I have so far:

<script language="javascript">
<!--
var state = 'hidden';
function showhide(layer_ref) {
if (state == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;
}
}
//-->
</script>


Standard Content Above<br>
<a href="javascript://" onclick="showhide('drop');">More Info</a><br>
<div id="drop" style="visibility:hidden;">
Drop Down Content.
</div>
Standard Content Below<br>
Standard Content Above<br>
<a href="javascript://" onclick="showhide('drop2');">More Info</a><br>
<div id="drop2" style="visibility:hidden;">
Drop Down Content.
</div>
Standard Content Below

See this here: http://www.judoka.co.uk/test/dropdown.htm

This seems to be working well but it leaves a space when the layer is hidden which renders it pretty useless.

Is there a simple fix or do I need something completely different?  Whatever I use needs to be easy to add to multiple pages (as the sample above) and support multiple drop-downs on each page.

Any help appreciated.  Les
0
uksupafly
Asked:
uksupafly
1 Solution
 
TimCotteeHead of Software ServicesCommented:
Hi uksupafly,

Rather than set visibility, use display style instead:

<script language="javascript">
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.display = state;
}
}
//-->
</script>


Standard Content Above<br>
<a href="javascript://" onclick="showhide('drop');">More Info</a><br>
<div id="drop" style="display:none;">
Drop Down Content.
</div>
Standard Content Below<br>
Standard Content Above<br>
<a href="javascript://" onclick="showhide('drop2');">More Info</a><br>
<div id="drop2" style="display:none;">
Drop Down Content.
</div>

Tim Cottee
0
 
uksupaflyAuthor Commented:
That's great.  The fastest solution I've had!

Thanks Tom

Les
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now