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

Link to comment

Share on other sites

IRWANTO82

Link to comment

Share on other sites

jaenzalo

Link to comment

Share on other sites

Join the conversation

Browse

Activity