Tech, Design and Development

There was a question asked in stackoverflow regarding “Dynamically Showing/Hiding Panels using JQuery”

http://stackoverflow.com/questions/15076494/dynamic-show-hide-panels-using-jquery

Here the author had a scenario where he wanted to create a FAQ page fetching data from a Sharepoint List and toggle Response visibility by clicking on Question.

So here is the code for that (thanks to the author of question as I’ve just modified the code slightly to fix the issue he had)

In this scenario we have a custom list FAQs with two Columns “Question” and “Response”

<script src="/sites/AppDemoSite/SiteAssets/jquery-1.9.1.js">
</script><script type="text/javascript">

$(document).ready(function()
{
    var soapEnv =
        "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> 
            <soapenv:Body> 
                 <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> 
                    <listName>FAQs</listName> 
                    <viewFields> 
                        <ViewFields> 
                           <FieldRef Name='Question' /> 
                           <FieldRef Name='Response'/> 
                           <fieldRef Name='ID'/>
                       </ViewFields> 
                    </viewFields> 
                </GetListItems> 
            </soapenv:Body> 
        </soapenv:Envelope>";

    $.ajax({
        url: "/sites/AppDemoSite/_vti_bin/lists.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        complete: processResult,
        contentType: "text/xml; charset="utf-8""
    });
});
function processResult(xData, status) {
    $(xData.responseText).find("z\:row").each(function() {
        var iDesc=$(this).attr("ows_Question");
        var iResp=$(this).attr("ows_Response");
        var iID=$(this).attr("ows_ID");
        var liHtml = "<div class='question' id='"+iID+"'>" + iDesc + "</div><div class='answer' id='a"+iID+"'><a href='/sites/AppDemoSite/Lists/FAQs/DispForm.aspx?ID='"+iID+"'>"+ iResp +"</a></div>";
        alert(liHtml);
        $("#FAQ").append(liHtml);
    });
    $(".question").click(function(){
        $("#a"+$(this).attr("id")).slideToggle("slow");});
}
</script>
<h1>A Big Fat FAQ</h1>
<div id="FAQ">