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.