Desplegar opción al elegir del dropdown

[josemari11]

Hola, aunque ya lo he colgado en el subforo de ASP, lo pongo aquí porque solo lleva dos lecturas y es más de HTML y si acaso CSS.

Bueno, al tema. Yo tengo la opción para seleccionar el período de fechas que quiero para mostar facturas, tickets, y mas, de un sql server. Pues el código es este:

Código PHP:

  <FORM name=miForm class="listado"> 
  <UL class="listado"> 
  <LI id="foldheader"> 
  Periodo: 
  <SELECT name=dropdown class="drop" onchange="put()"> 
    <OPTION>Diario 
    <OPTION>Semanal 
    <OPTION SELECTED>Mensual 
    <OPTION>Trimestral 
    <OPTION>Anual 
    <OPTION>Intervalo 
  </SELECT> 
  </LI> 
  <input type=hidden name=periodo value=Mensual> 
  <ul id="foldinglist" style="display:none"> 
    <li><input type=text name=fInicial class="cajon" size=8 maxlen=8 value=<%=date-3%>>Inicio</li> 
    <li><input type=text name=fFinal class="cajon" size=8 maxlen=8  value=<%=date%>>Fin</li> 
  </UL> 
</FORM>  
   

Eso lo tengo debajo de un calendario Javascript y la acción put es esta

Código PHP:

  function put() 
{ 
    option=document.getElementById("dropdown").options[document.getElementById("dropdown").selectedIndex].text 
    txt=option 
    document.getElementById("periodo").value=txt 
}  
   

Pues bien, yo quiero que SÓLO al seleccionar del dropdown "Intervalo" me muestre los input de fecha de inicio y fin, es decir, que el menú de PERIODO solo se expanda cuando seleccione la opción INTERVALO y que muestre esto:

Código PHP:

    <ul id="foldinglist" style="display:none"> 
    <li><input type=text name=fInicial class="cajon" size=8 maxlen=8 value=<%=date-3%>>Inicio</li> 
    <li><input type=text name=fFinal class="cajon" size=8 maxlen=8  value=<%=date%>>Fin</li> 
  </UL>  
   

Imagino que sabréis hacerlo. Si es necesario cambiar el post para buscar la solución más rápido, ruego a los moderadores lo muevan al lugar correcto.

Los estilos CSS los tengo definidos así:

Código PHP:

  .listado {  font-family: Arial; font-size: 8pt} 
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ; list-style-image:url(images/menos.gif)} 
#foldinglist{list-style-image:url(images/triangulo.gif); font-weight: normal} 
ul { margin-left: 10px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;} 
.drop { 
    font-family: Tahoma; 
    font-size: xx-small; 
    color: #000000; 
    border: #000000; 
    font-weight: bold; 
}  
   

Muchas gracias.