Well, that took longer than I thought. Story of my coding life! ;)
Anyway, here’s a bare bones solution, that you will need to style up to your own satisfaction. I’ve implemented a dummy FAQ temporarily on my free trial site that I am building and you can see it here for a few more days before I delete it: http://bernard-west.squarespace.com/faq/
Alright, firstly, don’t delete your current FAQ/product pages. Do this on a new page to make sure it works first.
Next add a new “page” to your site.
Click the plus symbol to add a new block to your page. Select “code”.
Paste this HTML code into the popup box (with your own questions and answers - replace “Question 1” etc with your own questions/products, replace “Here is answer 1…” etc with your own answers/descriptions):
<div class="questionBlock">
<span class="question" id="Q1" onclick="expand('A1')"><h2><img id="clickIcon" src='https://static.squarespace.com/static/53453ebbe4b0d46770eb7505/t/534e267fe4b06702647aabd8/1397630592016/arrow-right.png?format=300w'> Question 1</h2></span>
<span class="answer" id="A1"><p>Here is answer 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></span>
</div>
<div class="questionBlock">
<span class="question" id="Q2" onclick="expand('A2')"><h2><img id="clickIcon" src='https://static.squarespace.com/static/53453ebbe4b0d46770eb7505/t/534e267fe4b06702647aabd8/1397630592016/arrow-right.png?format=300w'> Question 2</h2></span>
<span class="answer" id="A2"><p>Here is answer 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></span>
</div>
<div class="questionBlock">
<span class="question" id="Q3" onclick="expand('A3')"><h2><img id="clickIcon" src='https://static.squarespace.com/static/53453ebbe4b0d46770eb7505/t/534e267fe4b06702647aabd8/1397630592016/arrow-right.png?format=300w'> Question 3</h2></span>
<span class="answer" id="A3"><p>Here is answer 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></span>
</div>
You will also need to change the image source for the little arrow that I randomly selected off the net. That is, this bit here:
<img id="clickIcon" src='https://static.squarespace.com/static/53453ebbe4b0d46770eb7505/t/534e267fe4b06702647aabd8/1397630592016/arrow-right.png?format=300w'>
Change the link between the single quotes to your own preferred image (if you even want to use an image. If you don’t want an image, just delete the above image tag wherever it occurs in your HTML.
Save that then click the settings button on the left hand menu and then click “code injection”. This is where you’ll put the JavaScript. Put the following JavaScript code into the “Footer” section:
<script>
var arrState=[];
(function() {
var arrAnswerBlocks=document.getElementsByClassName('answer');
for (var i=0;i<arrAnswerBlocks.length;i++) {
var element = arrAnswerBlocks[i];
var state = {id:(element.id), collapsed:true};
arrState.push(state);
}
})();
function expand(id) {
var state={};
var answerBlock=document.getElementById(id);
for (var n=0;n<arrState.length;n++) {
state=arrState[n];
if (state.id==id) {
if (state.collapsed) {
answerBlock.style.display="block";
state.collapsed=false; }
else {
answerBlock.style.display="none";
state.collapsed=true;
} //end if
}//end if
}// end for
}
</script>
If anyone wants an explanation of what the JavaScript is doing, let me know.
The last step is to put in your CSS styling. Click the “a” on the left menu to go back to editing your new page. Click the “Settings” button in the top right of the page and then click “Advanced” and enter the following CSS into the code box:
<style>
.question {
cursor:pointer;
color:black;
}
.answer {
display:none;
color:#606060;
}
.questionBlock {
padding:2px;
}
#clickIcon {
width:0.8em;
height:auto;
position:relative;
top:2px;
}
</style>
This is the code you want to adjust to get your styling right. You can change colours and fonts and spacings etc here.
One strange thing I noticed while doing this is that the preview of the site while you are logged in doesn’t match the actual live site. I think it’s some sort of clash between the style editor and the custom CSS that we entered. If you have another browser type, access your site as a visitor (i.e. not logged in) via it and you can refresh it and see the live view as you make changes while logged in on the other browser.
Go for it! :)