Here's a concise solution for creating hide/show text in Squarespace pages, using a Markdown Block and a jQuery script.
- Squarespace Markdown Button
- Squarespace Markdown Center Text
- Squarespace Markdown Image
- Font Size In Markdown
The native Squarespace html layouts can be difficult to interpret. Placing a single Markdown block on a page makes it very easy to target with scripting as it has a class of.markdown-block. Markdown is also easier for a non technical user to edit or add content compared to raw html. It supports bullet points and other styling codes. To add your image: click the link icon inside of the markdown box, select 'files' from the pop up then upload the image you’ll be using. Copy the filename only (including the extension) and paste it into the part that says “IMAGE-FILENAME-HERE.jpg” then you can delete the rest of the image file text (including the 1 text). Video Tutorial, Squarespace Tutorial, Web Design Kayleigh Noele September 4, 2018 video content, youtube, faq, javascript, markdown, tutorial, squarespace tutorial Facebook 0 Twitter LinkedIn 0 Tumblr Pinterest 0 0 Likes.
The code on this page is free for you to install on your Squarespace site.
+ How does it work?
The solution uses a Markdown block to hold the questions and answers. For this version of the script it should be the only Markdown block on the page, though I may improve the script at a later date to allow for multiple open/close areas.
Squarespace offers a lot of these functions in the style editor or regular text editor, but Markdown is great to use if you want to add styles to only certain text rather than change the style of the whole site. Here is the full code. Feel free to copy and paste. No need to head over the css section of Squarespace all of this can be done in the markdown block. This and the fact that you can move it around and not need to change the block id is one of the many reasons I use markdown to insert my codes.
A jQuery script then manipulates the Markdown block to add the open/close behaviour.
+ Why Markdown?
The native Squarespace html layouts can be difficult to interpret. Placing a single Markdown block on a page makes it very easy to target with scripting as it has a class of .markdown-block.
Markdown is also easier for a non technical user to edit or add content compared to raw html.
- It supports bullet points and otherstylingcodes
Markdown blocks can also include html, which opens up the possibility for richer experiences that include imagery and other embedded media.
+ Why jQuery
jQuery is a Javascript framework that removes a lot of complexity when coding solutions that need to work on multiple web browsers.
This open/close functionality is expressed in 4 lines of jQuery code (excluding the call to the main jQuery library) whereas a pure Javascript solution would be far longer.
It's true that the jQuery library can add page load time, but in my code I link to the one hosted on Google's content delivery network, which means there's a strong chance that a user already has the jQuery library in their browser cache.
The solution
NB. Code samples may be reused subject to certain conditions.
The Markdown
IMPORTANT: The content of the FAQ Questions & Answers MUST be inserted into a Markdown Block. Using a standard text block or code block won't work.
Here's the Markdown code that drives the example at the top of this page. I've edited out a lot of the content to make is easier to read.
- ## Denotes an H2 heading. The script interprets these as the links that open/close the content sections.
- The + sign is used as a signifier that the heading can be opened.
Squarespace Markdown Button
The jQuery code
You need the following code call in either your sitewide code injection point or on the page's code injection point. If you already using jQuery scripts elsewhere on your site you can omit this line.
Next up we have the code that does all of the work.
First off there's a clean version for copying and pasting into your page's code injection point. After that I've included an annotated version so that you can understand what's going on.
Squarespace Markdown Center Text
Antivirus for mac pro. Clean version:
Variation 1 - Making displayed answer retract when a new FAQ is clicked:
Squarespace Markdown Image
Variation 2 - Toggling the + / - symbols
Font Size In Markdown
First, the script: