JQuery and Json together

JQuery is a javascript library which eases javascript developemt and it also includes many Ajax functionality. So before we start we need to download the .js libraries from jquery official sites

Basic understanding

$("#header") = get the element with id="header"
$("h3") = get all "h3" element
$("div#content .photo") = get all element with class="photo" nested in the 'div id="content"'
$("ul li") = get all "li" element nested in all "ul"
$("ul li:first") = get only the first "li" element of the "ul"

See Using Jquery in repeater / gridview / datagrid
How to edit gridview row using jquery DOM

Jquery examples

Jquery	Resizeable	Collapse	Sliding Effect	Floating Div
Image Sliding	Image Changes	Div Alert	Div Disappear	Simple image changes
Datepicker

---

Collapse DIV example using JQuery

JQuery Collapsble DIV

Jquery Sample Code

1: 2:<h1>Collapse DIV example using JQuery </h1> 3: 4:<script type="text/javascript" src="js/jquery.js"></script> 5:<script type="text/javascript"> 6:$(function() 7:{ 8: 9:$("#divTitle").click(function(event) { 10:event.preventDefault(); 11:$("#divBody").slideToggle(); 12:}); 13: 14:$("#divBody a").click(function(event) { 15:event.preventDefault(); 16:$("#divBody").slideUp(); 17:}); 18:}); 19:</script> 20:<style type="text/css"> 21:a{color:#993300; text-decoration:none;} 22:#divBody { 23:width:70%; 24:display: none; 25:padding:5px; 26:border:2px solid #FADDA9; 27:background-color:#FDF4E1; 28:} 29:#divTitle{ 30:display:block; 31:width:70%; 32:padding:5px; 33:border:2px solid #D0E8F4; 34:background-color:#ECF8FD; 35:} 36:</style> 37: 38: 39: 40:<a href="#" id="divTitle">JQuery Collapsble DIV</a> 41: 42:<div id="divBody"> 43:<a href="#" class="close">[x]</a> 44:<p> 45:JQuery is fun ! lets share it with your freinds. 46:</p> 47:</div> 48: 49: