Witam,
chciałem na mojej stronie zrealizować efekt podobny do tego:

http://szort.pl/js001 (kliknijcie w "Policz cenę").

Po wybraniu jakiejś opcji rozwija się reszta formularza.

Sprawa wygląda tak, że ja chciałbym to bardziej zagnieździć

Czyli:

Pole 1
Pole 2 (dopiero po wybraniu opcji Pola 1)
Pole 3 (dopiero po wybraniu opcji Pola 2)
Pole 4 (dopiero po wybraniu opcji Pola 3)

Jak najlepiej to zrealizować? Będę wdzięczny za wszelkie wskazówki

na przykładzie checkboxów:

[HTML] pobierz, plaintext 
<script language="JavaScript">
function $(id){
  return document.getElementById(id);
}
function toogleElem(checkBoxId, toogleId){
  if ( $(checkBoxId).checked ){
    $(toogleId).style.display = 'block';
  } else {
    $(toogleId).style.display = 'none';
  }
}
</script>
 
<div id='d1'>
 <input type="checkbox" id="cb1" onclick="toogleElem('cb1', 'd2')">
</div>
<div id='d2' style="display: none;">
 <input type="checkbox" id="cb2" onclick="toogleElem('cb2', 'd3')">
</div>
<div id='d3' style="display: none;">
 <input type="checkbox" id="cb3"> i tak dalej... 
</div>
[HTML] pobierz, plaintext 

Dziękuję za dużą podpowiedź

Podpytam jeszcze tylko:
- jak zrobić coś takiego ale warunkowo dla elementu SELECT formularza?

Czyli:

SELECT
- opcja 1
- opcja 2


INPUT 1 (zawsze widoczny)

INPUT 2 (widoczny tylko gdy wybrana opcja 2)

zaczalem modyfikowac Twoj skrypt:

[HTML] pobierz, plaintext 
function warunkowo(selectdId, toogleId){
      if ( $(selectId).value == 2 ){
         $(toogleId).style.display = 'block';
         }
 
      else {
         $(toogleId).style.display = 'none';
      }
[HTML] pobierz, plaintext 

jednak nie działa pewnie źle wyciągam wartość z SELECT...

może polecisz jakaś stronę, gdzie będą wyjaśnione sposoby dostępu do atrybutów elementów formularza?



--- edit ----

ok, poradziłem sobie, po prostu literówka - w parametrach funkcji dałem selectdId zamiast selectId - wszystko działa