How do I create hide/show text on a page, like you see with FAQs?

Specifically, I'm using Aviator and on my services page I have a lot of entries that are service name with explanations underneath. I'd like the explanations to be hidden initially so visitors only see the list of services. Then they would have the option to expand the explanations under the services they want to read more about.

For example

Service Name (visitor would click name to open text underneath)[explanatory text here would remain hidden until user clicks service name, then expand to be read]

Is there any way to do this?

I'd love this as well. Have you had any other feedback?

I can have a go at doing this. It should be possible with a mix of javascript and css. Can either of you post a link to your site so I have something to work with? Cheers.

I’m looking to collapse the FAQ section of my site, seen here:

http://heidi-habel-ca10.squarespace.com/faqs/

I saw some very confusing JavaScript and CSS out there, if anyone can give me a step by step on how this would work, that would be extremely helpful.

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! :)

Ah nice! Yeah, jQuery makes these sorts of things easier.

I'll have to learn about this markdown stuff. That's far easier than writing the whole html code and content like I did.

It does. I liked your solution but thought that a Markdown block to contain the FAQs would be easier for a non-technical person to maintain.

There's still some know-how required but the tools inside the Markdown editor make it relatively straightforward to maintain.

I love you. This is exactly what I wanted. Thanks to everyone who tries to help make SS what it could be. I fear that SS, like other sites, want to charge clients for these sorts of options/assistance which is why they're not involved. C'mon SS give silvabokis a job for f*&^s sake, he's always helping people out!

Cheers @bigfuzzy

Drop me a line if you need a hand implementing it / require customisation / styling.

Thanks, will do if needed. I'll try implementation tonight and see how it goes. If you all hear a loud explosion coming from Norther Europe, that was probably me doing something wrong with the implementation! ;)

:-D - Explosies en Den Haag!!

@HHabel It may well be possible to adapt the script I posted earlier to work with your FAQ page, without you needing to move your content into a Markdown block.

Drop me a line via the link in my profile and I'll try to help you out.

I tried it. It works beautifully and nothing blew up (at least not in North London). Thankyou so much, that made my day. It will make @bigfuzzy's day too. The people who help should be getting the awards. Makes you appreciate how much a UX expert can do for the UX.

Cheers @KateH If you need help styling it, drop me a line via the link in my profile.

This has been tremendously helpful! Thank you both for all your assistance. The only nit picky thing I would LOVE to be able to do in the markdown box, is have the option to style with the H3 style. But otherwise this is exactly what my client was looking for.

And here's how everything is looking:

https://heidi-habel-ca10.squarespace.com/faqs

Try putting ### at the beginning of the lines you want to be h3, remove the ---------- and change h2 to h3 in the script

@HHabel I have amended the instructions for you to use H3 as the open/close text

Markdown is as follows:

### + This is a first question
This is the first line of an answer to the question above. This is a second line of the answer. 

* Bullet points
* Can be used too

### + This is a second question
This is a one line answer to the question above. 

Script is as follows:

<script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h3').css('cursor','pointer');
$(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
$(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();});
});
</script>

From a ux perspective , is it a good idea to use this sort of thing? I can envisage some users not knowing its clickable.

It's a common interaction, but you're right - it might need tweaking to make it more obvious.

It could be improved by

• adding clear microcopy around the piece 'Select a FAQ for more info..'
• styling the open/close hint (should probably be more overt than my '+' sign)
• styling the H3 to give it more of an accordion look

It's a common interaction, but you're right - it might need tweaking to make it more obvious.

It could be improved by

• adding clear microcopy around the piece 'Select a FAQ for more info..'
• styling the open/close hint (should probably be more overt than my '+' sign)
• styling the H3 to give it more of an accordion look

It's a common interaction, but you're right - it might need tweaking to make it more obvious.

It could be improved by

• adding clear microcopy around the piece 'Select a FAQ for more info..'
• styling the open/close hint (should probably be more overt than my '+' sign)
• styling the H3 to give it more of an accordion look
• amending the script so that the first item is open to begin with, to give the user a hint that content is behind the other headings too.

It is only for certain types of content, and it needs to be obvious what it does. For long copy which is only going to interest certain visitors, show/hide (with an excerpt finishing mid-sentence and an invitation to click to see more) may help – reader gets an overview with the option of more if interested and remains on the page. If they choose to read they are probably less likely to get bored and leave, missing that key fact further down. Also good for Q&A. I hope I have that right :) @silvabokis is the ux specialist!

I'm trying to implement a two-layer hideshow but am having trouble getting the code injection to cooperate.I have my primary hideshow categories in h2 and the sub hideshows within that in h3. I tried telling the h3 to open/close until it reaches another h3 OR an h2, but I am not very familiar with jQuery and have consequently lost myself in the code. Any advice on how to do a two-layer hideshow would be much appreciated.

@silvabokis

Thanks your edited markdown, it was incredibly helpful for me. Tonight is the first night I've tried to write any sort of code at all so forgive me. May I be so rude as to ask for a little further help..

I managed to work out that changing the H1/H2 stuff relates to whether my text is formatted as headings, (GO ME) and i got your script working for H1 in no time (Thankyou)

I was just wondering if its possible to have information within some or one of the answers which can also be expanded?

I tried to edit your page injection to do this, but i totally messed it up (To be honest it was a massive stab in the dark)

essentially i'm using multiple expandable H1 questions which expand to show answers..

the last H1 question expands to show an answer but i'm looking to have 3 more expansions within this answer. (if that makes sense) ideally I want them to be H1 also, but it wouldnt matter if they were either H1 or H2 . i'll just be super glad that i can have expanding text within expanding text.

I did have an attempt at editing your code, to see if i could edit the "until" parameters to stop at the next H2 instead and then have the second expansions be H2 headings, but like i said.. I totally fluffed this up and i have no knowledge in this area what-so-ever.

Thank you in advance if your able to shed any light.regards, kaine