Simple Accordion Menu

glendean · October 11, 2012

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>

IRWANTO82 · October 23, 2012

maybe better you could post full sample so we can try it or link

jaenzalo · March 27, 2013

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

Sign In

Simple Accordion Menu

Recommended Posts

glendean

IRWANTO82

jaenzalo

Join the conversation

Browse

Activity