Drop down links

hello,
i was wondering, how do you create drop down links where you click on the link and information would display right below the link? i'm not thinking of a drop down menu. this would be displayed as part of information on the page. and what code would i use? any help would be appreciated. Thanks

If I understand what your after. I drop drop menu is often used in a navigation bar. And there is not usually enough room to provide a snapshot of information of the page in there. Drop down links are mostly used for navigation to another webpage.

check out the link below, i'd like to create something kind of like what those drop down links are that are orange colored in the middle of the page.

link

They are using javascript to utilize an accordion setup.

[html]<style type="text/css">
.AccordionTitle, .AccordionContent, .AccordionContainer
{
position:relative;
width:200px;
}

.AccordionTitle
{
height:20px;
overflow:hidden;
cursorointer;
font-family:Arial;
font-size:8pt;
font-weight:bold;
vertical-align:middle;
text-align:center;
background-repeat:repeat-x;
display:table-cell;
background-image:url('/sites/default/files/108/images/title_repeater.jpg');
-moz-user-select:none;
}

.AccordionContent
{
height:0px;
overflow:auto;
display:none;
}

.AccordionContainer
{
border-top: solid 1px #C1C1C1;
border-bottom: solid 1px #C1C1C1;
border-left: solid 2px #C1C1C1;
border-right: solid 2px #C1C1C1;
}
</style>
<div style="height:310px;" >
<div id="AccordionContainer" class="AccordionContainer">
<div><div class="AccordionTitle" onclick="runAccordion(1);" onselectstart="return false;">Accordion 1</div></div>
<div id="Accordion1Content" class="AccordionContent">I Am Accordion 1.</div>
<div><div class="AccordionTitle" onclick="runAccordion(2);" onselectstart="return false;">Accordion 2</div></div>
<div id="Accordion2Content" class="AccordionContent">I Am Accordion 2.</div>
<div><div class="AccordionTitle" onclick="runAccordion(3);" onselectstart="return false;">Accordion 3</div></div>
<div id="Accordion3Content" class="AccordionContent">I Am Accordion 3.</div>
<div><div class="AccordionTitle" onclick="runAccordion(4);" onselectstart="return false;">Accordion 4</div></div>
<div id="Accordion4Content" class="AccordionContent">I Am Accordion 4.</div>
<div><div class="AccordionTitle" onclick="runAccordion(5);" onselectstart="return false;">Accordion 5</div></div>
<div id="Accordion5Content" class="AccordionContent">I Am Accordion 5.</div>
</div>
</div>
[/html]

javascript:

var ContentHeight = 200;
var TimeToSlide = 250.0;

var openAccordion = '';

function runAccordion(index)
{
var nID = "Accordion" + index + "Content";
if(openAccordion == nID)
nID = '';

setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33);

openAccordion = nID;
}

function animate(lastTick, timeLeft, closingId, openingId)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;

var opening = (openingId == '') ? null : document.getElementById(openingId);
var closing = (closingId == '') ? null : document.getElementById(closingId);

if(timeLeft <= elapsedTicks)
{
if(opening != null)
opening.style.height = ContentHeight + 'px';

if(closing != null)
{
closing.style.display = 'none';
closing.style.height = '0px';
}
return;
}

timeLeft -= elapsedTicks;
var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);

if(opening != null)
{
if(opening.style.display != 'block')
opening.style.display = 'block';
opening.style.height = (ContentHeight - newClosedHeight) + 'px';
}

if(closing != null)
closing.style.height = newClosedHeight + 'px';

setTimeout("animate(" + curTick + "," + timeLeft +",'" + closingId + "','" + openingId + "')", 33);
}

thanks!
how do they get a link to display like a link and stay on the current page?

in your example, how do you get the Accordian 1 text to display as a link?

I would take out the javascript coding
Instead of:


Put:

<div><div><a href="www.yoursite.com">Accordion 1</a></div></div>

Thats what I would think let me know if it works

nope, that didn't work, i tried taking out the javascript, and adding the link with the javascript, both didn't work. I'm not sure where to add the link to??