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>