Ayuda para cambiar un código

chiquirf · #1 (**permalink**) 27/01/2008, 13:17

Hola a todos, he encontrado en Internet el código para hacer un menú tipo acordeón y estoy adaptándolo a la Web que estoy haciendo, quiero cambiarle algo pero no se como hacerlo.

El código JavaScript que tengo es el siguiente:

Código PHP:

   
var ContentHeight = 400; 
var TimeToSlide = 250.0; 
 
var openAccordion = ''; 
 
function runAccordion(index) 
{ 
  var nID = "Accordion" + index + "Content"; 
  if(openAccordion == nID) 
    nID = ''; 
     
  setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33); 
   
  openAccordion = nID; 
   
   
} 
 
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); 
}

En el HTML tengo lo siguiente:

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu acordion</title>

<style type="text/css">
<!--
.AccordionTitle, .AccordionContent, .AccordionContainer {  position:relative;   width:200px;}

.AccordionTitle {  height:20px;  overflow:hidden;  cursor:pointer;  font-family:Arial;  font-size:8pt;  font-weight:bold;  vertical-align:middle;  text-align:center;  display:table-cell;  -moz-user-select:none;}

.AccordionContent {  height:0px;  overflow:auto;  display:none; }

.AccordionContainer{  border-top: solid 1px #C1C1C1;  border-bottom: solid 1px #C1C1C1;  border-left: solid 2px #C1C1C1;  border-right: solid 2px #C1C1C1;
}
-->
</style>
<script type="text/javascript" src="acordion.js"></script>
</head>
<body>

<div id="AccordionContainer" class="AccordionContainer">
	<div onclick="runAccordion(1);">
		<div class="AccordionTitle" onselectstart="return false;">
			Accordion 1
		</div>
	</div>
	<div id="Accordion1Content" class="AccordionContent">
    	<table border="0" id="tabla1" height="100">
			<tr><td>tabla1.celda1</td></tr>
			<tr><td>tabla1.celda2</td></tr>
			<tr><td>tabla1.celda3</td></tr>
			<tr><td>tabla1.celda4</td></tr>
		</table>
	</div>

	<div onclick="runAccordion(2);">
		<div class="AccordionTitle" onselectstart="return false;">
			Accordion 2
		</div>
	</div>
	<div id="Accordion2Content" class="AccordionContent">
    	<table border="0" id="tabla2" height="250">
			<tr><td>tabla2.celda1</td></tr>
			<tr><td>tabla2.celda2</td></tr>
			<tr><td>tabla2.celda3</td></tr>
			<tr><td>tabla2.celda4</td></tr>
		</table>
	</div>

	<div onclick="runAccordion(3);">
		<div class="AccordionTitle" onselectstart="return false;">
			Accordion 3
		</div>
	</div>
	<div id="Accordion3Content" class="AccordionContent">
    	<table border="0" id="tabla2" height="150">
			<tr><td>tabla3.celda1</td></tr>
			<tr><td>tabla3.celda2</td></tr>
			<tr><td>tabla3.celda3</td></tr>
			<tr><td>tabla3.celda4</td></tr>
		</table>
	</div>
</div>

</body>
</html>

El funcionamiento el código lo pueden ver aquí, que es donde lo saqué:
http://blog.paranoidferret.com/index...cordion-menus/

Bueno, lo que necesito es cambiar en el código el valor de la variable "ContentHeight" no sea un valor exacto, sino que lo coja de cada una de las tablas usando el ID.

He logrado coger el valor del height de la tabla con:

Código PHP:

  var tabla_z = document.getElementById('tablaz'); 
var tabla_z_alto = tabla_z.height;

Pero ahí me quedo, no se donde ni como meter ese valor, y ni que modificar para que funcione.

¿¿Alguien me puede ayudar??

Gracias

Carlos