Jump to content

Simple Accordion Menu


glendean

Recommended Posts

Simple Accordion Menu that displays in UniHTMLFrame

Note... Most of the HTML code is from switchonthecode.com/tutorials/javascript-and-css-tutorial-accordion-menus so if you use please give their site a visit.

To sample add a TUniLabel to MainForm called PCInfoLabel (case sensitive)

Create a UniHTMLFrame and add the following code to UniHTMLFrame.HTML
 

 

<!DOCTYPE html>
<html>
<head>

<script>
var ContentHeight = 200;
var TimeToSlide = 250.0;

var openAccordion = '';

function PCInformation(PCValue)
{
MainForm.PCInfoLabel.setText(PCValue);
}

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

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

openAccordion = nID;
}
window.onload=runAccordion(1);

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);
}

</script>

<style>
.AccordionTitle, .AccordionContent, .AccordionContainer
{
position:relative;
width:150px;
}

.AccordionTitle
{

display: block;
background-color: #FF9927;
font-weight: bold;
text-align:center;
font-family:Arial;
font-size:8pt;
font-weight:bold;
vertical-align:middle;
margin: 1px;
cursor: pointer;
padding: 5 5 5 7px;
list-style: circle;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.AccordionContent
{
text-align:center;
overflow:auto;
line-height:180%;
overflow: hidden;
display:none;
}

.AccordionContainer
{
border-top: 0px;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
}

</STYLE>

</head>

<body>

<div id="AccordionContainer" class="AccordionContainer">

<div onclick="runAccordion(1);">
<div class="AccordionTitle" onselectstart="return false;">
PC Information
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<a href="javascript:PCInformation('Summary')">Summary</a>
<BR>
<a href="javascript:PCInformation('Services')">Services</a>
<BR>
<a href="javascript:PCInformation('Drives')">Drives</a>
<BR>
<a href="javascript:PCInformation('Network')">Network</a>
</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle" onselectstart="return false;">
Reports
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
<a href="javascript:PCInformation('Report1')">Report1</a>
</div>

<div onclick="runAccordion(3);">
<div class="AccordionTitle" onselectstart="return false;">
System
</div>
</div>
<div id="Accordion3Content" class="AccordionContent">
<a href="javascript:PCInformation('System1')">System1</a>
</div>
</div>
</body>
</html>
 
Link to comment
Share on other sites

  • 2 weeks later...
  • 5 months later...

Hi i've tried it and works great thanks, is there a way to send the value recived in the function PCInformation get to another control other than a label the thing is i dont know much about javascript i'll apreciate if you could help me thanks

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...