Style demo

Source code

			
			javascript
$(function(){
  $('#form1').formalist();
});
			
		

			
			css
form .hidden {color:#e78080;transition:all 0.3s;}
form .visible {color:#fcfcfc !important;font-size:16px !important;transition:all 0.3s;}
form .box[data-show] {color:#e78080;font-size:14px;}
			
		

			
			html
<form id="form1">
  <div class="box">
    What's your favorite resolution on Youtube?
    <label><input type="radio" name="resolution" id="1080p" />1080p</label>
    <label><input type="radio" name="resolution" id="720p" />720p</label>
    <label><input type="radio" name="resolution" id="480p" />480p</label>
    <label><input type="radio" name="resolution" id="none" />None</label>
  </div>
  <div class="box" data-show="1080p" data-hide="*">
    You choose the "1080p" resolution
  </div>
  <div class="box" data-show="720p" data-hide="*">
    You choose the "720p" resolution
  </div>
  <div class="box" data-show="480p" data-hide="*">
    You choose the "480p" resolution
  </div>
</form>
			
		

Other demonstrations

• Basic demo - a simple demo with checkboxs
• Cascade demo - cascade demo that shows a multiple nested lists
• Input demo - custom options demo with an input field of type text
• Style demo - pretty css demo to make your form visually awesome

Github

This demo sample comes from a Github repository
https://github.com/xavierfoucrier/formalist

Made with love by xavierfoucrier