Animate Popup(faq)

use script file
---------
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>

********
use style for cntrls
---------
<style type="text/css">
    #divFAQ
     {
         position:fixed;
         width:50px;
         height:50px;
         text-align:left;
         border:1px solid gray;
         right:0;
         bottom:0;
         background-color:White;
     }
       #divFAQ img
        {
            float: left;
        }
     .divQn
        {
            float: left;
            width: 280px;
            padding: 10px;
            border: 1px solid gray;
            margin: 5px 0;
            cursor: pointer;
        }
</style>

*********
use jquery
-----

<script type="text/javascript" language="javascript">
    jQuery.fn.isChildOf = function (b) {
        return (this.parents(b).length > 0);
    };

    $(document).ready(function () {       

        $("#divFAQ img").click(function () {

            if ($("#divFAQ").width() > 100) {
                $("#divFAQ").animate({
                    width: "50px",
                    height: "50px"
                });
                $("#divFAQ .divQn,textarea").remove();
                return;
            }
            $(document).click(function (event) {
                if (!$(event.target).isChildOf("#divFAQ")) {
                    $("#divFAQ").animate({
                        width: "50px",
                        height: "50px"
                    });
                    $("#divFAQ .divQn,textarea").remove();
                    $(document).unbind("click");
                }
            });
            onload = true;
            $("#divFAQ").animate({
                width: "300px",
                height: "70px"
            }, function () {
                var txtQn = document.createElement("textarea");
                txtQn.id = "txtQn";
                $(txtQn).insertAfter($("#imgFAQ"));               
                $(txtQn).keyup(function () {
                    getQuestions($(this).val());
                });
                $(txtQn).width("230px");
                $(txtQn).height("50px");

                $(txtQn).css({
                    float: "left",
                    marginLeft: "10px"
                });
            });
            getQuestions("");
        });
    });

    //Get faq question
    function getQuestions(val) {
        $.ajax({
            type: "POST",
            url: "FAQTest.aspx/GetQuestion",
            datatype: "JSON",
            data: "{'Questn':'" + val + "'}",
            contentType: "application/json; charset=utf-8",
            success: function (xmldata) {
                //  alert(xmldata.d);
                showQuestions(xmldata.d);
            }
        });
    }
    //Get faq answer
    function getAnswer(val, divQn) {
        $.ajax({
            type: "POST",
            url: "FAQTest.aspx/GetAnswer",
            datatype: "JSON",
            data: "{'ID':'"+ val +"'}",
            contentType: "application/json; charset=utf-8",
            success: function (xmldata) {
                // alert(xmldata.d);
                showAnswer(xmldata.d, divQn);
            }
        });
    }

    var pheight = 0;
    // Show Answer in faq
    function showAnswer(xmldata, divQn) {
        var paraans = document.createElement("p");
        paraans.className = "panswer";
        $(paraans).html($(xmldata).find("column").eq(0).text());
        $("#divFAQ .divQn .panswer").remove();
        $(divQn).append(paraans);
        if (pheight > 0)
            $("#divFAQ").animate({
                height: "-=" + pheight
            }, 1);
        pheight = $(paraans).height();
        $("#divFAQ").animate({
            height: "+=" + pheight
        });
    }

    var onload = true;
    // Show question In faq
    function showQuestions(xmldata) {
        $("#divFAQ .divQn").remove();
        var found = false;
        $(xmldata).find("row").each(function () {
            found = true;
            var divQn = document.createElement("div");
            divQn.className = "divQn";
            $(divQn).click(function () {
                getAnswer($(this).find(".qnid").eq(0).val(), this);
            });

            var qnid = document.createElement("input");
            qnid.type = "hidden";
            qnid.className = "qnid";
            $(qnid).val($(this).find("column").eq(0).text());

            var paraqn = document.createElement("p");
            $(paraqn).html("Qn: " + $(this).find("column").eq(1).text());

            $(divQn).append(qnid);
            $(divQn).append(paraqn);

            $("#divFAQ").append(divQn);
            var divheight = $(divQn).height();
            divheight += 30;
            if (onload) {
                $("#divFAQ").animate({
                    height: "+=" + divheight
                });
            }
        });
        if (!found) {
            $("#imgSaveQn").remove();
            var imgSave = document.createElement("img");
            imgSave.id = "imgSaveQn";
            imgSave.src = "../Images/save_btn1.jpg";
            $(imgSave).css({
                width: "70px",
                marginLeft: "60px",
                cursor: "pointer"
            });

            $(imgSave).insertAfter("#txtQn");
            $(imgSave).click(function () {
                saveQuestion();
                getQuestions("");
            });
        }
        else {
            $("#imgSaveQn").remove();
        }
        if (onload)
            onload = false;
    }

        // Save the question In faq
        function saveQuestion() {
            var qn = $("#txtQn").val();
         
            $.ajax({
                type: "POST",
                url: "FAQTest.aspx/SaveQuestion",
                data: "{'questn':'" + qn + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function () {
                    alert("Saved successfully!");
                    $("#txtQn").val('');

                }
            })
        }

</script>

**************
use inside body (and after form) of which page you want or in the master page
---------
<div id="divFAQ">
        <img src="../Images/faq.png" alt="" id="imgFAQ" style="cursor: pointer;"/>
    </div>