I have just used a Content Editor Web Part. It looks up to a custom list named FAQ. It seems to be a little flicker, adding the <DOCTYPE> attribute seems to mitigate it a little. The accordion seems to invoking the callback function twice when you collapse a section. This is using your option 2.
Code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<!--StyleSheets-->
<link rel="stylesheet" type="text/css" href="../Code/Scripts/jQuery-UI/css/dark-hive/jquery-ui-1.10.2.min.css"/>
<!--Scripts-->
<script type="text/javascript" src="../Code/Scripts/jQuery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../Code/Scripts/jQuery-UI/js/jquery-ui-1.10.2.js"></script>
<script type="text/javascript" src="../Code/Scripts/SPServices/jquery.SPServices-0.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
ExecuteCAML();
});
function ExecuteCAML(){
var viewFields = "<ViewFields xmlns='http://schemas.microsoft.com/sharepoint/soap/'>" +
"<FieldRef Name='LinkTitle'/><FieldRef Name='Answer' /></ViewFields>";
var query = "<Query xmlns='http://schemas.microsoft.com/sharepoint/soap/'>" +
"</Query>";
tempFieldsArray = viewFields.split("Name='");
fieldArray = new Array();
for (x = 1; x < tempFieldsArray.length; x++)
{
fieldArray.push(tempFieldsArray[x].substring(0,tempFieldsArray[x].indexOf("'")));
}
$().SPServices({
operation: "GetListItems",
async: true,
listName: "FAQ",
CAMLViewFields: viewFields,
CAMLQuery: query,
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
for (fields in fieldArray){
var h4 = "<h4 style=\"font-weight: bold;\">" + $(this).attr("ows_" + fieldArray[fields]) + "</h4>";
var div = $(this).attr("ows_" + fieldArray[fields]);
var content = $(h4 + div);
content.appendTo("#accordion");
}
});
$( "#accordion" ).accordion({collapsible: true, heightStyle: "fill",icons: null, active: false});
}
});
}
function getCurrentSite() {
var thisSite = $().SPServices.SPGetCurrentSite();
var thisList = $().SPServices.SPListNameFromUrl();
window.location.href = "../Lists/FAQ/NewForm.aspx"
}
</script>
<style type="text/css">
.header-custom {
border-bottom: 1px solid #6f9dd9;
background-color: #afd2ff;
background-image: url("/_layouts/images/listheadergrad.gif");
background-repeat: repeat-x;
}
.header-custom {
text-align: left;
font-family: verdana;
font-size:x-small;
border-top: 0px solid #d8d8d8;
vertical-align:middle;
padding: 0px;
}
.label-custom{
cursor: default;
text-align: left;
font-family: verdana;
font-size: 8pt;
height: 19px;
color:#000066
}
.body-custom {
text-align: left;
font-family: verdana;
font-size:xx-small;
border-top: 0px solid #d8d8d8;
color: #525252;
}
</style>
</head>
<body style="margin: 0px">
<div class="body-custom" id="accordion"></div>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="label-custom" style="text-align:left;padding-right:20px; width: 129px; height: 26px;"><br/>
<img alt="" src="/_layouts/images/rect.gif"/> <a href="#" onclick="getCurrentSite()" >Add New Question</a>
</td>
<td class="label-custom" style="display:none;text-align:left;padding-right:20px; height: 26px;"><br/>
<img alt="" src="/_layouts/images/rect.gif"/> <a href="#" >Change List</a>
</td>
</tr>
<tr><td> </td></tr>
</table>
</body>
</html>