colin.irwin

Sorry to be the bearer of bad tidings, but there is currently no way for a customer / non contributing user to upload images or other content to the site.

No problem mate

Add

.sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:before, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:link:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:link:before, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:visited:before, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:visited:before {

   /* The icon size */
   font-size: 40px;
   }

   .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:link, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:link, .sqs-block-socialaccountlinks .social-account-list.social-icon-size-large a:visited, .sqs-block-socialaccountlinks-v2 .social-account-list.social-icon-size-large a:visited {

   /* Space around icons */
   width: 40px;
   height: 40px;
   }

To your Custom CSS Editor

Can you post a URL?

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

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

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

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

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

:-D - Explosies en Den Haag!!

Cheers @bigfuzzy

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

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.

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/

You can create custom maps using Google Maps and then embed them in your Squarespace site.

<style>
   .post-meta { visibility: hidden }
</style>