Tema: cambiar valor ID en html
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 02/08/2009, 10:39
Avatar de gjx2
gjx2
 
Fecha de Ingreso: agosto-2008
Ubicación: R.D
Mensajes: 1.153
Antigüedad: 16 años, 5 meses
Puntos: 139
Respuesta: cambiar valor ID en html
Mira un ejemplo que hice para ti

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>Simple Javascript Accordions - by www.dezinerfolio.com</title> 
  6. <style type="text/css"> 
  7. * {
  8.     margin:0;
  9.     padding:0;
  10.     list-style:none;
  11. }
  12. body {
  13.     font-family: Arial, Helvetica, sans-serif;
  14.     font-size: 11px;
  15.     margin:10px;
  16. }
  17.  
  18. #basic-accordian{
  19.     border:5px solid #EEE;
  20.     padding:5px;
  21.     width:350px;
  22.     position:absolute;
  23.     left:621px;
  24.     top:140px;
  25.     margin-left:-175px;
  26.     z-index:2;
  27.     margin-top:-100px;
  28. }
  29.  
  30. .accordion_headings{
  31.     padding:5px;
  32.     background:#99CC00;
  33.     color:#FFFFFF;
  34.     border:1px solid #FFF;
  35.     cursor:pointer;
  36.     font-weight:bold;
  37. }
  38.  
  39. .accordion_headings:hover{
  40.     background:#00CCFF;
  41. }
  42.  
  43. .accordion_child{
  44.     padding:15px;
  45.     background:#EEE;
  46. }
  47.  
  48. .header_highlight{
  49.     background:#00CCFF;
  50. }
  51.  
  52. </style> 
  53. <script type="text/javascript" src="accordian.pack.js"></script> 
  54. </head> 
  55. <body onload="new Accordian('basic-accordian',5,'header_highlight');"> 
  56.  
  57.  
  58. <div id="basic-accordian" ><!--Parent of the Accordion--> 
  59.  
  60. <div align="center">Simple Accordions</div> 
  61.  
  62. <?php
  63.  
  64. $Pais = array(
  65. "Mexico" =>"Pais muy bonito, con mujeres muy lindas",
  66. "Colombia" => "Pais muy bonito con mujeres lindas y comparonas",
  67. "Peru" => "Pais de muchas produciones y bonito");
  68. $a = 0;
  69.  foreach($Pais as $row => $field):?>
  70.  <!--Start of each accordion item--> 
  71.   <div id="test<?=$a?>-header" class="accordion_headings" ><?=$row?></div><!--Heading of the accordion ( clicked to show n hide ) --> 
  72.   
  73.   <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content--> 
  74.   
  75.   <div id="test<?=$a?>-content"><!--DIV which show/hide on click of header--> 
  76.   
  77.     <!--This DIV is for inline styling like padding...--> 
  78.     <div class="accordion_child"><?=$field?><br /> 
  79.     </div> 
  80.     
  81.   </div> 
  82.  
  83.  <? $a++; endforeach; ?>
  84.  
  85.  
  86.  
  87.  
  88.  
  89.  
  90. <a href="05.html" style="float:left">Previous Demo</a> 
  91. <a href="02.html" style="float:right;">Next Demo</a> 
  92.  
  93. </div><!--End of accordion parent--> 
  94.  
  95.  
  96.  
  97.  
  98.  
  99. </body> 
  100. </html>