javascript
$(function(){
$('#form1').formalist();
});
css
form .hidden {display:none;}
form .visible {display:block;}
html
<form id="form1">
<div class="box">
<label>Operating system:</label>
<label><input type="radio" name="system" id="macintosh" value="Macintosh" />Macintosh</label>
<label><input type="radio" name="system" id="unix" value="Unix" />Unix</label>
<label><input type="radio" name="system" id="windows" value="Windows" />Windows</label>
</div>
<div class="box" data-show="macintosh" data-hide="system">
<label>Select your Macintosh version:</label>
<select name="macintoshversion">
<option>-</option>
<option value="macosx">Mac OS X</option>
<option value="macos9">Mac OS 9</option>
</select>
</div>
<div class="box" data-show="unix" data-hide="system">
<label>Select your Unix version:</label>
<select name="unixversion">
<option>-</option>
<option value="ubuntu">Ubuntu</option>
<option value="jolicloud">Jolicloud</option>
<option value="chromeos">Chrome OS</option>
</select>
</div>
<div class="box" data-show="windows" data-hide="system">
<label>Select your Windows version:</label>
<select name="windowsversion">
<option>-</option>
<option value="windows8">Windows 8</option>
<option value="windows7">Windows 7</option>
<option value="windowsvista">Windows Vista</option>
<option value="windowsxp">Windows Xp</option>
</select>
</div>
<div class="box" data-show="macosx" data-hide="system macintoshversion">
<label>Select your MAC OS X version:</label>
<select>
<option>-</option>
<option value="macosxversion">10.9</option>
<option value="macosxversion">10.8</option>
<option value="macosxversion">10.7</option>
<option value="macosxversion">10.6</option>
<option value="macosxversion">10.5</option>
<option value="macosxversion">10.4</option>
<option value="macosxversion">10.3</option>
<option value="macosxversion">10.2</option>
<option value="macosxversion">10.1</option>
<option value="macosxversion">10.0</option>
</select>
</div>
<div class="box" data-show="macos9" data-hide="system macintoshversion">
<label>Select your MAC OS 9 version:</label>
<select>
<option>-</option>
<option value="macos9version">9.2.2</option>
<option value="macos9version">9.2.1</option>
<option value="macos9version">9.1</option>
<option value="macos9version">9.0.4</option>
<option value="macos9version">9.0</option>
</select>
</div>
<div class="box" data-show="ubuntu" data-hide="system unixversion">
<label>Select your version:</label>
<select>
<option>-</option>
<option value="ubuntuversion">13.10</option>
<option value="ubuntuversion">13.04</option>
<option value="ubuntuversion">12.10</option>
<option value="ubuntuversion">12.04</option>
<option value="ubuntuversion">11.10</option>
<option value="ubuntuversion">11.04</option>
<option value="ubuntuversion">10.10</option>
<option value="ubuntuversion">10.04</option>
</select>
</div>
<div class="box" data-show="jolicloud" data-hide="system unixversion">
<label>Select your version:</label>
<select>
<option>-</option>
<option value="jolicloudversion">1.2</option>
<option value="jolicloudversion">1.1</option>
<option value="jolicloudversion">1.0</option>
</select>
</div>
<div class="box" data-show="chromeos" data-hide="system unixversion">
<label>Select your version:</label>
<select>
<option>-</option>
<option value="chromeosversion">Latest</option>
<option value="chromeosversion">Bêta</option>
</select>
</div>
<div class="box" data-show="windows8" data-hide="system windowsversion">
<label>Select your version:</label>
<select>
<option>-</option>
<option value="windows8version">8.1</option>
<option value="windows8version">8.0</option>
</select>
</div>
<div class="box" data-show="windows7" data-hide="system windowsversion">
<label>Select your version:</label>
<select>
<option>-</option>
<option value="windows7version">7.0 SP1</option>
<option value="windows7version">7.0</option>
</select>
</div>
<div class="box" data-show="windowsvista" data-hide="system windowsversion">
<label>Select your version:</label>
<select>
<option>-</option>
<option value="windowsvistaversion">6.0 SP2</option>
<option value="windowsvistaversion">6.0 SP1</option>
<option value="windowsvistaversion">6.0</option>
</select>
</div>
<div class="box" data-show="windowsxp" data-hide="system windowsversion">
<label>Select your version:</label>
<select>
<option>-</option>
<option value="windowsxpversion">5.1</option>
<option value="windowsxpversion">5.0</option>
</select>
</div>
<div class="box" data-show="macosxversion" data-hide="*">
Mac OS X is a series of Unix-based graphical interface operating systems developed, marketed, and sold by Apple Inc.
</div>
<div class="box" data-show="macos9version" data-hide="*">
Mac OS 9 is the final major release of Apple's Classic Mac OS operating system.
</div>
<div class="box" data-show="ubuntuversion" data-hide="*">
Ubuntu is a Debian-based Linux operating system, with Unity as its default desktop environment.
</div>
<div class="box" data-show="jolicloudversion" data-hide="*">
Jolicloud OS is an Ubuntu-based Linux distribution developed by the French company Jolicloud.
</div>
<div class="box" data-show="chromeosversion" data-hide="*">
Chrome OS is a Linux-based operating system designed by Google to work primarily with web applications.
</div>
<div class="box" data-show="windows8version" data-hide="*">
Windows 8 is a personal computer operating system developed by Microsoft as part of Windows NT family of operating systems.
</div>
<div class="box" data-show="windows7version" data-hide="*">
Windows 7 is an operating system produced by Microsoft for use on personal computers, including home and business desktops, laptops, netbooks, tablet PCs, and media center PCs.
</div>
<div class="box" data-show="windowsvistaversion" data-hide="*">
Windows Vista is an operating system by Microsoft for use on personal computers, including home and business desktops, laptops, tablet PCs, and media center PCs.
</div>
<div class="box" data-show="windowsxpversion" data-hide="*">
Windows XP is an operating system produced by Microsoft for use on personal computers, including home and business desktops, laptops and media centers.
</div>
</form>
This demo sample comes from a Github repository
https://github.com/xavierfoucrier/formalist
Made with love by xavierfoucrier