colin.irwin Posted September 2, 2014 Share Posted September 2, 2014 See newly posted answer for 2 tier open/close using h1 and h2 I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
colin.irwin Posted September 2, 2014 Share Posted September 2, 2014 (edited) 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 January 6, 2015 by silvabokis I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
colin.irwin Posted September 2, 2014 Share Posted September 2, 2014 (edited) ^^^^ 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 September 2, 2014 by silvabokis I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
colin.irwin Posted September 2, 2014 Share Posted September 2, 2014 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. I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
Guest Posted September 6, 2014 Share Posted September 6, 2014 You're an absolute hero. Thank you so much for your help! Link to comment
Guest Posted September 6, 2014 Share Posted September 6, 2014 @silvabokis It only took me about 60 seconds to fix, But i noticed your code was missing this bit from the from, it didn't work for me till i added this part back on. Just in-case this is useful for anybody else reading.. this piece of code needs to be added to the start of the code injection. Link to comment
colin.irwin Posted September 6, 2014 Share Posted September 6, 2014 Ah yes.. ..I forgot it because I have the jQuery script reference in the sitewide header. I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
n00bie Posted October 1, 2014 Share Posted October 1, 2014 (edited) I like the Markdown approach but how do I insert an image as the body of the expandable portion instead of just text? Edited October 1, 2014 by n00bie Link to comment
n00bie Posted October 1, 2014 Share Posted October 1, 2014 I like the markdown approach but how do I insert an image as the body of the expandable portion instead of just text? Link to comment
Guest Posted October 7, 2014 Share Posted October 7, 2014 I have a question for @Bernard West : As part of the answer that comes down when I click on the question, I would like an image to appear that I have save on my computer. Is it possible to do that? How exactly would I code that in?Thank you! Link to comment
Guest Posted October 23, 2014 Share Posted October 23, 2014 (edited) @Bernard West : I tried to copy and paste all of the script for questions 1-3 and continue with questions 4-6, but the expand and collapse function is only working for the first three questions. I tried looking at the script that I put into the footer but I can't see any pattern in it. Can you help? Please? Edited October 23, 2014 by Guest Link to comment
JMcKnight Posted December 17, 2014 Share Posted December 17, 2014 Been trying to figure this out and playing around with the code, but could multiple levels of colapse be integrated with h2 as the bottom level and then with varying levels of bullets? Here's the page in question (yes it's in French, but you get the big picture) http://www.ameliorerlessoins.org/psychiatrie-1 Link to comment
Farmette Helen Posted January 7, 2015 Share Posted January 7, 2015 @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. Link to comment
Guest Posted January 9, 2015 Share Posted January 9, 2015 Thank you, it was simple and looks great. Link to comment
Farmette Helen Posted February 4, 2015 Share Posted February 4, 2015 @Bernard West: Do you know how to get the image to change when the answer is open vs when it is collapsed? I tried to get this to happen with a script, but it only works for my first question - if I click on subsequent questions the first image changes but not the one clicked on. Site is www.lyonsfarmette.com/faq. Again, that first quesiton works but the others don't. I'm assuming this is an id problem? Link to comment
Bernard West Posted February 5, 2015 Share Posted February 5, 2015 Yeah it will be. I'll try and get back to this later to have a look at it. If I don't, it might be a week or so before I can get to it. Got to travel to a funeral on the other side of the country leaving tomorrow. Off the top of my head, what you'd need to do is add some code inside the if/else (state.collapsed) block, to change the image to the new/correct one for each branch of that if/else block. To change the image you'll need to get the element with code and change it's 'scr' attribute. Link to comment
LizzyN Posted February 7, 2015 Share Posted February 7, 2015 @Bernard-West Thank you for providing this code! It has been incredibly helpful. Can you please recommend how to update the arrow image. You mention in your post that we should update to our own image, but I'm not sure how to do that. Thank you for your help. Link to comment
Nicole DeTone Photography Posted February 10, 2015 Share Posted February 10, 2015 @silvabokis thank you! I used the original instructions and first code you provided and this worked for me. However, I used it on a page that is part of an index and when I go to that page through the main index page it no longer works. Have you/anyone experienced this? Link to comment
Bernard West Posted February 15, 2015 Share Posted February 15, 2015 Hi @LizzyN ... In my code where I write: You need to change what's between the single quote marks after src= So, for example, your image might be .... src='http://yourimage.com/yourimage.jpg' ... Link to comment
dsmiller Posted March 16, 2015 Share Posted March 16, 2015 @silvabokis yes I am having the same problem as Nicole. is there something we can change in the script to make it work within an index? Link to comment
sssupers Posted March 17, 2015 Share Posted March 17, 2015 (edited) Wow. Long thread. Maybe it's easier to answer THIS question by answering MY question: How-to-tweak-this-code-4-hideshow-a-text-toggle Edited March 17, 2015 by sssuperguy Hi, I'm sssupers. Link to comment
solongsekhu Posted April 2, 2015 Share Posted April 2, 2015 (edited) I’m using the Markdown Block/jQuery method very kindly offered by silvabokis for a collapsible/expandable FAQ. Has anyone tried making a version of this with more obviously clickable symbols instead of the plus signs at the beginning of each line? Maybe some sort of arrow icon, to show that it can be expanded? It would be extra nice if that icon changed when clicked too (for example a plus sign button icon changing to a minus sign button, or a down arrow changing to and up arrow to show that it can be folded back up). Any ideas? Edited April 2, 2015 by solongsekhu Link to comment
gclodge845 Posted March 15, 2016 Share Posted March 15, 2016 @silvabokis thank you for posting this, unfortunately it is not working for me. I keep getting the markdown looking like this, what am i doing wrong?,@silvabokis Link to comment
crayongirl Posted June 21, 2016 Share Posted June 21, 2016 (edited) @Bernard West - thanks I used your html code solution below and now have a FAQs page with zero html/coding knowledge :) Just a couple of questions - 1. I removed the first h2 reference because I didn't want the Q in Heading format. I'd actually just like it in Bold if that's possible? 2. I'd like to create some links within the Answer text to other pages - either external or my own - possible? I tried the markdown solution from @silvabokis, just couldn't get it to work - shame because the html method for 93 FAQs took FOREVER!thanks both :) any additional help appreciated! Edited June 21, 2016 by crayongirl Initial Revision Link to comment
Guest Posted July 12, 2016 Share Posted July 12, 2016 (edited) Hey guys, I just lost hope, trying to resolve this - the list expands on page load and I have to click elements to collapse it. Any ideas what the problem might be? Thanks @Bernard West Edited July 12, 2016 by karolism Initial Revision Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment