bmakarand2009 · September 16, 2012 21:51
diff --git a/DayAndNightExample b/DayAndNightExample
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <!-- Day And Night Example with simple Buttons 
 http://jsfiddle.net/mbhatamb/ba3FC/1/-->
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>JQuery Dom Maniupulation with list</title>
 </head>
 <body>
    <h1>Simple Day and Night Website</h1>
    <button id="dayBtn"> Day Button </button>
    <button id="nightBtn"> Night Button </button>
    <h2> This is some sample text</h2>
 </body>


 //CSS


 ////JavaScript
 $(document).ready(function() {
    console.log("Dom Loaded");

    $("#dayBtn").click(function() {
        console.log(this);
 /*use of this keyword,this represents the button but
        to access this in jquery it has to be wrapped in $() */
        $(this).text("Update Day Button");
        $('body').removeClass('nightClass');
        $('body').addClass('dayClass');
        console.log($('body'));
    });

    /* Button.click, internally is jquery calls a converts it to
    .on('click', function(){}); so why unneccessarily have one more step
    when this is also pefectly readable, other events e.g are
    changed,hover, doubleClick etc. */
    $("#nightBtn").on('click', function() {
        console.log(this);
        console.log($('body'));
        $('body').removeClass('dayClass');
        $('body').addClass('nightClass');
        console.log($('body'));
    });

 });

 //CSS
 h1{color:blue; font-size:20px; }

 .dayClass{ background : yellow;
                color : black
         }
 .nightClass { background : red;
    color:white }
diff --git a/ToggleFAQExample b/ToggleFAQExample
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <!-- http://jsfiddle.net/mbhatamb/8bedg/ -->
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <title>FAQ in JQuery</title>
 </head>
 <body>
    <h1>FAQ</h1>
    <dl>
        <dt> What are the 3 ways to create a list in HTML</dt>
        <dd>UL  for unordered list, ol for ordered list , and dl for definition list</dd>
        <dt> Why use JQuery </dt>
        <dd>It give just enough abstraction so that you dont get stuck in mundane things
            but lot of control to do your business logic </dd>
        <dt> What is JQury.onReady() </dt>
        <dd> onReady() function gets called when the DOM has finished loading the document,
            how does Jquery know, it keeps polling every 10secs for it </dd>
    </dl>
 </body>


 $(document).ready(function(){
    console.log("document has been loaded");
    //$('dd').hide(); //others are dd.fadeIn(), dd.fadeOut, 
    //$('dd').addClass('hide'); //using css way
    //hide all th children except 1st one, see nth-child,jquery doc
    $('dd').filter(':nth-child(n+4)').hide(); //we can also simply use       $("dd:nth-child(n+4)").hide()
    
    
    
 //    $('dt').click(function(){ //this is inefficient since, if thre are 50 questions there would be 50 listeners, while we can just have one parent listener. on was added in 
    $('dl').on('click','dt',function(){
        console.log("dt clicked / mouse hovered");
        //one way to do it
        //$('dd').filter(':nth-child(n+1)').hide();
        console.log($(this).siblings('dd'));
        /* simple way
        $(this).next().siblings('dd').hide();
        $(this).next().show();
        */
        
        /*
          slideDown is shows the element  with sliding action
          slideUp hides the element with sliding action
        */
        $(this).next()
            .slideDown('200') 
            .siblings('dd')
            .slideUp('200');
    });
   
 });


 body {
    width : 500px;
    margin : auto;
    text-align : center;
 }
 h1{
    color:red;
    font-size:1.5em;
    padding : 20px;
 }

 dl{
    color:black;
    margin:10px;
    border-bottom : 3px double red;
 }
 dd{
    
 }
 dt{
    cursor:pointer;
    font-weight : bold;
    font-size : 1.3em;
    line-height : 2em;
    background  : grey;
 } 

 .hide { display : none;}
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html lang="en">
	<!-- Day And Night Example with simple Buttons
	http://jsfiddle.net/mbhatamb/ba3FC/1/-->
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>JQuery Dom Maniupulation with list</title>
	</head>
	<body>
	<h1>Simple Day and Night Website</h1>
	<button id="dayBtn"> Day Button </button>
	<button id="nightBtn"> Night Button </button>
	<h2> This is some sample text</h2>
	</body>


	//CSS


	////JavaScript
	$(document).ready(function() {
	console.log("Dom Loaded");

	$("#dayBtn").click(function() {
	console.log(this);
	/*use of this keyword,this represents the button but
	to access this in jquery it has to be wrapped in $() */
	$(this).text("Update Day Button");
	$('body').removeClass('nightClass');
	$('body').addClass('dayClass');
	console.log($('body'));
	});

	/* Button.click, internally is jquery calls a converts it to
	.on('click', function(){}); so why unneccessarily have one more step
	when this is also pefectly readable, other events e.g are
	changed,hover, doubleClick etc. */
	$("#nightBtn").on('click', function() {
	console.log(this);
	console.log($('body'));
	$('body').removeClass('dayClass');
	$('body').addClass('nightClass');
	console.log($('body'));
	});

	});

	//CSS
	h1{color:blue; font-size:20px; }

	.dayClass{ background : yellow;
	color : black
	}
	.nightClass { background : red;
	color:white }
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html lang="en">
	<!-- http://jsfiddle.net/mbhatamb/8bedg/ -->
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>FAQ in JQuery</title>
	</head>
	<body>
	<h1>FAQ</h1>
	<dl>
	<dt> What are the 3 ways to create a list in HTML</dt>
	<dd>UL for unordered list, ol for ordered list , and dl for definition list</dd>
	<dt> Why use JQuery </dt>
	<dd>It give just enough abstraction so that you dont get stuck in mundane things
	but lot of control to do your business logic </dd>
	<dt> What is JQury.onReady() </dt>
	<dd> onReady() function gets called when the DOM has finished loading the document,
	how does Jquery know, it keeps polling every 10secs for it </dd>
	</dl>
	</body>


	$(document).ready(function(){
	console.log("document has been loaded");
	//$('dd').hide(); //others are dd.fadeIn(), dd.fadeOut,
	//$('dd').addClass('hide'); //using css way
	//hide all th children except 1st one, see nth-child,jquery doc
	$('dd').filter(':nth-child(n+4)').hide(); //we can also simply use $("dd:nth-child(n+4)").hide()



	// $('dt').click(function(){ //this is inefficient since, if thre are 50 questions there would be 50 listeners, while we can just have one parent listener. on was added in
	$('dl').on('click','dt',function(){
	console.log("dt clicked / mouse hovered");
	//one way to do it
	//$('dd').filter(':nth-child(n+1)').hide();
	console.log($(this).siblings('dd'));
	/* simple way
	$(this).next().siblings('dd').hide();
	$(this).next().show();
	*/

	/*
	slideDown is shows the element with sliding action
	slideUp hides the element with sliding action
	*/
	$(this).next()
	.slideDown('200')
	.siblings('dd')
	.slideUp('200');
	});

	});


	body {
	width : 500px;
	margin : auto;
	text-align : center;
	}
	h1{
	color:red;
	font-size:1.5em;
	padding : 20px;
	}

	dl{
	color:black;
	margin:10px;
	border-bottom : 3px double red;
	}
	dd{

	}
	dt{
	cursor:pointer;
	font-weight : bold;
	font-size : 1.3em;
	line-height : 2em;
	background : grey;
	}

	.hide { display : none;}