Ciao. E' valido quanto postato da Andrea per la soluzione javascript, come d'altronde hai richiesto. A mio parere si potrebbe però adoperare una soluzione con solo CSS senza scomodare javascript. In particolare con l'uso della pseudo-classe :cheched e del selettore sibling.
Ad ogni modo, nel tuo codice html, noto qualche errore che andrebbe corretto. Ad esempio, l'attributo "name" deve avere uguale valore per tutti i bottoni radio di uno stesso gruppo, così che si abbia un corretto funzionamento.
Alcuni div poi mi sembrano chiusi male.
Se può essere d'interesse, posto un esempio per la soluzione CSS sul tuo codice html (che ho cercato di adattare al meglio):
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="ISO-8859-1">
<style type="text/css">
#campiDispo{display:none}
#radioDispo:checked ~ * #campiDispo{display:block}
</style>
</head>
<body>
<input id="radioInfo" name="moduloRichiesta" type="radio" value="Richiesta informazioni" checked="checked" /><label for="radioInfo">Richiesta informazioni</label>
<br /><input id="radioDispo" name="moduloRichiesta" type="radio" value="Richiesta disponibilita" /><label for="radioDispo">Richiesta disponibilità</label>
<form id="moduloRichiesta" action="#" method="post">
<input type="hidden" name="recipient" value="#" />
<div>
<div class="row half">
<div class="6u">
<input type="text" class="text" name="Nome e Cognome" placeholder="Nome e Cognome" required />
</div>
<div class="6u">
<input type="text" class="text" name="email" placeholder="email" required />
</div>
</div>
<!-- Campi da aggiungere dinamicamente -->
<div id="campiDispo">
<div class="row half">
<div class="6u">
<input type="text" class="text" name="Telefono" placeholder="Telefono" required />
</div>
<div class="6u">
<select name="Numero Persone" class="text" >
<option value="Numero Persone" selected="selected">Seleziona Numero Persone</option>
<option value="2">1</option>
<option value="3">2</option>
<option value="3">3</option>
<option value="3">4</option>
<option value="3">5</option>
</select>
</div>
</div>
<div class="row half">
<div class="6u">
<input name="Data di arrivo" type="text" class="text" id="pickDateIn" value="Scegli la data di arrivo*" required />
Apri calendario <img src="images/calendar_icon.png" alt="Apri calendario" onClick="calendar.doo.display( document.getElementById('pickDateIn') )" />
</div>
<div class="6u">
<input name="Data di partenza" type="text" class="text" id="pickDateOut" value="Scegli la data di partenza**" required />
Apri calendario <img src="images/calendar_icon.png" alt="Apri calendario" onClick="calendar.doo.display( document.getElementById('pickDateOut') )" />
</div>
</div>
</div>
<!-- Fine campi da aggiungere dinamicamente -->
<div class="row half">
<div class="12u">
<textarea name="Messaggio" rows="4" placeholder="Messaggio"></textarea>
</div>
</div>
<div class="row">
<div class="12u">
<input type="submit" class="button" value="Invia Messaggio" />
</div>
</div>
</div>
</form>
</body>
</html>
Ovviamente si tratta di CSS3, per cui non è garantita la compatibilità con vecchi browser.
Rispondi quotando
