Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 11
mford

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

Question

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?

Edited by Aisfofo
retag

Share this post


Link to post

Recommended Posts

  • 14

Here's a slightly more concise solution, using jQuery.

The idea is to use a Markdown block to hold your questions and answers. It should be the only Markdown block on the page.

The Markdown will look something like the following (The + at the start of each question is a cue for the user to know they can expand the entry).


+ 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. 

Questions should be styled as H2.

Then put the following code into your page's injection point:


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
   $('.markdown-block .sqs-block-content h2').css('cursor','pointer');
   $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
   $(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();});
   });
   </script>

The first can be omitted if you already have a link to jQuery in your sitewide code injection point.

The second script tells the mouse cursor to become a pointer when over the Markdown H2s - this is to tell the user it's clickable. Then, when an H2 is clicked it toggles the visibility of all content between the clicked H2 and the next H2 / the end of the markdown block.

See it in action here - http://www.silvabokis.com/idea-testing/

Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 5

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

Edited by Bernard West

Share this post


Link to post
  • 3

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.

Share this post


Link to post
  • 1

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.

Edited by Bernard West

Share this post


Link to post
  • 1

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.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 1

Cheers @bigfuzzy

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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 1

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

Edited by HHabel

Share this post


Link to post
  • 1

@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>


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 1

2 tier open/close using h1 and h2 in a markdown block

First, the markdown


# + This is an item

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 subitem 1

Subitem 1 copy

## + This is a second subitem

Some copy for the second subitem

# + This is a second item

Here is subsection content

# + This is a third item

It also has content

# + This is a fourth item

This is a one line answer to the question above. 

An h1 ( single # ) represents a folder

An h2 ( double # ) represents a subfolder.

The jQuery script is as follows:


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

<script>$(document).ready(function(){

/* Setup cursors to show over h1 & h2 */
$('.markdown-block .sqs-block-content h1, .markdown-block .sqs-block-content     h2').css('cursor','pointer');

/* Close h1s and h2s to begin with */
$('.markdown-block .sqs-block-content h1').nextUntil('h1').slideUp();

/* Open clicked h1 and close all others*/ 
$('.markdown-block .sqs-block-content h1').click(function () {
$('.markdown-block .sqs-block-content h1').nextUntil('h1').slideUp();
$(this).nextUntil('h1').slideDown();
/* But we need to force the subfolders to close  */
$('.markdown-block .sqs-block-content h2').nextUntil('h2, h1').hide();
/* Also disable pointer events for just this h1*/
$('.markdown-block .sqs-block-content h1, .markdown-block .sqs-block-content h2').css('pointer-events','auto');
$(this).css('pointer-events','none');

});
/* Toggling for h2 folders */ 
$('.markdown-block .sqs-block-content h2').click(function () {
$(this).nextUntil('h2, h1').slideToggle();
});

});
</script>

Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 1

^^^^ This made my head hurt until I hit on the idea of closing all but the clicked on folder.

Actually.. ..if you click on an already expanded h1 it closes then opens again.. ..will have a think about how to fix it.

Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 1

Code above now amended. By default, once a top level folder is open it has its click event removed so you can only close it by opening another top level folder, at which time the first folder becomes clickable again.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 1

@mbmorandi,

The problem here is in the HTML, not the JavaScript. Each of your questions and answers has an id tag like id="Q1" or id="A1". If you just copy and paste the code from the first 3 questions, your fourth question will reference the id you pasted and will open that question. So for each of your additional questions after Q3, make sure you change the ids to match - Question 4's id should be id="Q4" and the onclick="expand A4" while the Answer 4's id should be id="A4". You have to change these by hand for each new question you add to the FAQ.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

@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.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...