A couple of different teams made a similar request for an interactive FAQ. One team actually went to the effort of finding an example on the internet they wanted :D.
The FAQ looks like this
clicking on a Question reveals the answer. The questions are split into sections clicking on the tab reveals that section.
First create a Custom List with columns Section (Choice), Question (Single line of text) and Answer (Multiple lines of text). Then create a View called FAQ with just the Question and Answer columns Grouped by the Section column.
Add the FAQ List View to a blank page in the Page Content Region and add the following code in a Script Editor.
[code lang=”js”]
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js”></script>
<link type=”text/css” rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css” />
<style>
td.scFAQQuestion {
background: #f2f2f2;
width:100%;
border: 1px solid gray;
padding-bottom: 5px;
margin-bottom: 1px;
margin-left:1px;
}
td.scFAQQuestion:hover {
border: 2px solid gray;
cursor:pointer;
}
table.scFAQTable {
width:100%;
}
img.scFAQQuestionExpandable {
float:right;
}
</style>
<div id=”tabs”></div>
<script>
/* Convert SP 2013 List into FAQ – Stephen Carroll * http://www.sharepointsights.com */
jQuery(document).ready(function($) {
var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
if (inDesignMode != “1”)
{
// page is in browse mode
listToTabs();
}
});
$(“#tabs”).append(‘<ul id=”ListGroupsToTabs”></ul>’);
function listToTabs() {
// Find the first List View – ms-listviewtable and hide it
var listID = $(“table.ms-listviewtable”).closest(“div.ms-rtestate-notify.ms-rtestate-read”).attr(“id”);
$(“#” + listID).hide();
// find the Group Titles and add each as a new tab
var index = 0;
$(“#” + listID).find(“td.ms-gb”).each(function () {
var title = $(this).text();
title = title.replace(“Section : “,””);
$(“#ListGroupsToTabs”).append(‘<li><a href=”#tab-‘+index+’” id=”TabHead’+index+’” >’+
title+'</a></li>’).after(‘<div id=”tab-‘+index+’”></div>’);
var group = $(this).closest(“tbody”).next();
if ($(group).contents().html() != undefined)
{
FAQs = convertTableToFAQs($(group));
}
$(“#tab-” + index).append((FAQs));
index++;
});
$(“#tabs”).tabs();
}
function convertTableToFAQs($webPart) {
var FAQContents = ”;
var arrowImgs = [ “/sites/MYSITECOL/SiteCollectionDocuments/rightArrow.png”,”/sites/MYSITECOL/SiteCollectionDocuments/downArrow.png” ];
$webPart.find(“tr”).each(function () {
$(this).wrap(‘<table class=”scFAQTable”>’);
$(this).find(‘td.ms-cellStyleNonEditable’).detach(); // remove first cell if its the selection cell
var answer = $(this).find(‘td:last’).detach().hide(); // remove and hide the answer
$(this).find(‘td.ms-cellstyle:first’)
.append(‘<img class=”scFAQQuestionExpandable” src=”/sites/MYSITECOL/SiteCollectionDocuments/rightArrow.png”/>’)
.addClass(‘scFAQQuestion’) // question cell
.click(function() {
var isHidden = answer.is(‘:hidden’) ? 1 : 0; // toggle down / right arrow
answer.slideToggle(“slow”);
$(this).find(‘img’).attr(‘src’,arrowImgs[isHidden]);
}
);
// Create new row after each question and answer
$(this).after(‘<tr class=”scAnswer”></tr>’);
$(this).next().append(answer); // add in the answer
});
return $webPart.contents();
}
</script>
[/code]
Two graphics are required for the right and down arrows – replace as required in the script
“/sites/MYSITECOL/SiteCollectionDocuments/rightArrow.png”,”/sites/MYSITECOL/SiteCollectionDocuments/downArrow.png”
The code is pretty self explanatory and is not activated when the Page is in Edit Mode – so the Page can still be worked on once the script is in use. I made a List Template for the List and provided the users instructions on how to setup and use on their own Site.