[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2006-05-18
2
Medium Priority
?
214 Views
Last Modified: 2010-04-06
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
Comment
Question by:uksupafly
2 Comments
 
LVL 43

Accepted Solution

by:
TimCottee earned 300 total points
ID: 16707350
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
 

Author Comment

by:uksupafly
ID: 16707725
That's great.  The fastest solution I've had!

Thanks Tom

Les
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question