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.οnlοad=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 οnclick="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 οnclick="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 οnclick="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>