josiasackmann Posted October 13, 2016 Share Posted October 13, 2016 Make sure your page is ENABLED in squarespace if this doesn't work immediately Link to comment
mmacmaster Posted November 15, 2016 Share Posted November 15, 2016 I changed the additional question ID's and I still don't get an expandable divs on the new questions. The questions are there but on-click does nothing - . If I cancel my session in less then 24hours, am I charged a fee? Here is answer 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link to comment
devonstank Posted December 11, 2016 Share Posted December 11, 2016 (edited) There are many solutions out there (some good and some bad), but you'll need to do some Googling to find them. Basically, you'll need to Have some JavaScript run under the code injection section to manipulate some HTML within a code block. This feature is typically called a drop-down accordion. Devon Stank @ Devonstank.com (Squarespace Tips & Tricks) Edited December 11, 2016 by Vexsoft Initial Revision Link to comment
dhm Posted December 13, 2016 Share Posted December 13, 2016 Hi guys, Anyway to create a BOX style dropdown of content?Like this? Anyone have ingenious coding for this beautiful clean style? HUGE thanks Link to comment
aakritip Posted January 30, 2017 Share Posted January 30, 2017 Hi,This is super helpful - but when I've created something similar, my questions are clickable as they're meant to, and the answers do show/hide as intended. However, the answers are already shown when the page loads, which counters the whole intent to have the short FAQ page (area-wise), and only expand those answers which are clicked. Help? I'd like for the page to load with questions only to begin with. Link to comment
Guest Posted March 29, 2017 Share Posted March 29, 2017 Hi Bernard, Thank you for this solution, I have implemented into my site, but I just wondered whether there is a way to style it so that the answers are revealed more smoothly? At the moment, the text is appearing instantly. Thanks in advance! Link to comment
natebyerley Posted August 15, 2017 Share Posted August 15, 2017 Fantastic! Thank you! Link to comment
Jyo Posted March 12, 2019 Share Posted March 12, 2019 Thank you for sharing this code. It worked for me. However, on under an index it only works on one page. Is it possible to have it on each page in the index? Link to comment
mychentt Posted March 21, 2019 Share Posted March 21, 2019 Hi, I need some help on customization and styling. May you please explain the function of each line of the code? I am trying to customize it a bit so that I don't have to call the show/hide function by "h2" -- the goal is to adjust the spacing before and after as well as the font type/size/color of the expanded item (or the clicked item). If you have any other thoughts, please let me know. Thank you so much in advance! Link to comment
1000YOKAI Posted May 20, 2019 Share Posted May 20, 2019 This did not work for me using the Brine template. I tried to use the Page Code injection, but it did not work. I used the site code injection it worked but since I use a lot of markdown all of my H2s in markdown boxes turned into dropdowns. So close! But I could not figure out how to make it work. :/ Has anyone come across this? Or a way to fix it? Link to comment
Guest Posted June 26, 2019 Share Posted June 26, 2019 Hi all, thanks @Bernard West this works great. However, I have the same question as @aakritip the answers are already shown when the page loads, what should I do to get the questions only at the beggining and the answers only when clicked? Many thanks for your help. Link to comment
deandra.olivieri Posted April 29, 2020 Share Posted April 29, 2020 (edited) On 4/16/2014 at 12:06 AM, Bernard West said: 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! 🙂 Hey Bernard, I know it's been a while since you posted on this, however, I'm wondering if you can help me customize this code. I'm trying to add an additional div that functions as a link as opposed to prompting a drop down. This is the webpage where you can see what I'm working on: https://www.jenevoymakeupstudio.com/mega-shop Instead of a drop down for "gift cards" I want to create a link to an external source. I also want to create another category for "Shop All Products" that would link to an internal page. Thank you so much!! Edited April 29, 2020 by deandra.olivieri Link to comment
tuanphan Posted April 29, 2020 Share Posted April 29, 2020 22 minutes ago, deandra.olivieri said: Hey Bernard, I know it's been a while since you posted on this, however, I'm wondering if you can help me customize this code. I'm trying to add an additional div that functions as a link as opposed to prompting a drop down. This is the webpage where you can see what I'm working on: https://www.jenevoymakeupstudio.com/mega-shop Instead of a drop down for "gift cards" I want to create a link to an external source. I also want to create another category for "Shop All Products" that would link to an internal page. Thank you so much!! Can you clarify this? "Instead of a drop down for "gift cards" I want to create a link to an external source. I also want to create another category for "Shop All Products" that would link to an internal page. " Also, If you want to create Accordion/Tab, try this plugin Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
deandra.olivieri Posted April 29, 2020 Share Posted April 29, 2020 2 minutes ago, tuanphan said: Can you clarify this? "Instead of a drop down for "gift cards" I want to create a link to an external source. I also want to create another category for "Shop All Products" that would link to an internal page. " Also, If you want to create Accordion/Tab, try this plugin hey, yes I can. See below—this is what I'm trying to do: +Shop All (internal link, no drop down) +Makeup (drop down with additional categories underneath) +Skincare (drop down with additional categories underneath) +Hair (drop down with additional categories underneath) +Tools and Accessories (drop down with additional categories underneath) +Gift Cards (external link, no drop down) This is how I've already adapted the code: <div class="questionBlock"> <span class="question" id="Q1" onclick="expand('A1')"><h3>+ Makeup</h3></span> <span class="answer" id="A1"> <p><h2><a href="face">Face</a></h2></p> <p><h2><a href="eyes">Eyes</a></h2></p> <p><h2><a href="lips">Lips</a></h2></p> <p><h2><a href="brows">Brows</a></h2></p> <p><h2><a href="lashes">Lashes</a></h2></p> <p><h2><a href="brushes">Brushes</a></h2></p> <p><h2><a href="makeup-tools">Tools + Accessories</a></h2> </p> </span> </div> <div class="questionBlock"> <span class="question" id="Q2" onclick="expand('A2')"><h3>+ Skin Care</h3></span> <span class="answer" id="A2"> <p><h2><a href="normal-skin">Normal</a></h2></p> <p><h2><a href="dry-skin">Dry</a></h2></p> <p><h2><a href="oily-skin">Oily</a></h2></p> <p><h2><a href="sensitive-skin">Sensitive</a></h2></p> <p><h2><a href="again-skin">Aging</a></h2></p> <p><h2><a href="acne-skin">Acne</a></h2></p> <p><h2><a href="pigmentation-skin">Pigmentation</a></h2></p> </span> </div> <div class="questionBlock"> <span class="question" id="Q3" onclick="expand('A3')"><h3>+ Hair</h2></span> <span class="answer" id="A3"> <p><h2><a href="shampoo-conditioner">Shampoo + Conditioner</a></h2></p> <p><h2><a href="treatments">Treatments</a></h2></p> <p><h2><a href="hair-styling">Styling</a></h2></p> <p><h2><a href="hair-accessories">Styling Accessories</a></h2></p> <p><h2><a href="extensions">Extensions</a></h2></p> </span> </div> <div class="questionBlock"> <span class="question" id="Q4" onclick="expand('A4')"><h3>+ Tools + Accessories</h2></span> <span class="answer" id="A4"> <p><h2><a href="beauty-blender">Beauty Blender</a></h2></p> <p><h2><a href="boob-boost">Boob Boost</a></h2></p> <p><h2><a href="brushes">Makeup Brushes</a></h2></p> <p><h2><a href="airbrush">Airbrush</a></h2></p> <p><h2><a href="makeup-tools">Makeup Tools</a></h2></p> <p><h2><a href="brush-cleaner">Brush Cleaner</a></h2></p> <p><h2><a href="hair-tools">Hair Styling + Accessories</a></h2></p> <p><h2><a href="smile">Teeth Whitening</a></h2></p> </span> </div> <div class="questionBlock"> <span class="question" id="Q5" onclick="expand('A5')"><h3>+ Gift Cards</h3></span> <span class="answer" id="A5"> <p><h2><a href="https://clients.mindbodyonline.com/ASP/main_shop.asp?studioid=271697&tg=&vt=&lvl=&stype=42&view=&trn=0&page=&catid=&prodid=&date=4%2f28%2f2020&classid=0&prodGroupId=&sSU=&optForwardingLink=&qParam=&justloggedin=&nLgIn=&pMode=2&loc=1">Purchase Now</a></h2></p> </span> </div> So instead of id Q5 having a drop down, I just want it to be a link. No drop down. Is this possible? Link to comment
abigailducote Posted May 13, 2020 Share Posted May 13, 2020 (edited) On 4/16/2014 at 7:15 AM, colin.irwin said: Try putting ### at the beginning of the lines you want to be h3, remove the ---------- and change h2 to h3 in the script Hi Colin! Appreciate how helpful and attentive you've been on this thread. I followed the steps you provided from this: http://www.silvabokis.com/idea-testing/ and everything works really well EXCEPT since I have a "banner" on the section where the markdown block exists, when the text shows, it doesn't fill in the banner. It just creates white space below. My "banner" is really just a color fill, so I'm not worried about cropping at all, I would just love the color to extend when the block extends. Got any thoughts on this? www.mileshko.squarespace.com PW: mileshko (scroll to FAQs on homepage) Edited May 13, 2020 by abigailducote Link to comment
tuanphan Posted May 14, 2020 Share Posted May 14, 2020 17 hours ago, abigailducote said: Hi Colin! Appreciate how helpful and attentive you've been on this thread. I followed the steps you provided from this: http://www.silvabokis.com/idea-testing/ and everything works really well EXCEPT since I have a "banner" on the section where the markdown block exists, when the text shows, it doesn't fill in the banner. It just creates white space below. My "banner" is really just a color fill, so I'm not worried about cropping at all, I would just love the color to extend when the block extends. Got any thoughts on this? www.mileshko.squarespace.com PW: mileshko (scroll to FAQs on homepage) Not related, but You can use this plugin to create accordion, easy to install/customize without coding skills. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
abigailducote Posted May 20, 2020 Share Posted May 20, 2020 On 5/14/2020 at 9:28 AM, tuanphan said: Not related, but You can use this plugin to create accordion, easy to install/customize without coding skills. Thank you for this! I actually love the look of what I have going right now BUT only issue is the white space when the text expands. I would be happy to pay someone to fix it if I need to...interested? 😄 Link to comment
tuanphan Posted May 21, 2020 Share Posted May 21, 2020 9 hours ago, abigailducote said: Thank you for this! I actually love the look of what I have going right now BUT only issue is the white space when the text expands. I would be happy to pay someone to fix it if I need to...interested? 😄 Did you fix? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
abigailducote Posted May 21, 2020 Share Posted May 21, 2020 7 hours ago, tuanphan said: Did you fix? No! But I'm glad to see it looks correct for someone. On both Chrome and Safari, it looks like this for me (with the white space and weird overlap). Also looks this way for my client. 😕 Link to comment
VRajic Posted August 26, 2020 Share Posted August 26, 2020 On 4/16/2014 at 5:15 AM, colin.irwin said: Try putting ### at the beginning of the lines you want to be h3, remove the ---------- and change h2 to h3 in the script Is there a way to add a box around it as seen on this website https://www.mamasformamas.org/volunteer/?v=3e8d115eb4b3 Link to comment
tuanphan Posted August 28, 2020 Share Posted August 28, 2020 On 8/27/2020 at 6:09 AM, VRajic said: Is there a way to add a box around it as seen on this website https://www.mamasformamas.org/volunteer/?v=3e8d115eb4b3 Can you share site url? Or use this accordion plugin. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
IXStudio Posted August 28, 2020 Share Posted August 28, 2020 Hi @VRajic Please use this free plugin You can customize it to any design you think without coding. Just check this youtube video at 3:03 Please use the like button if it helps you! Best, Leopold Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
Guest Posted September 17, 2020 Share Posted September 17, 2020 posting here due to the 7.1 update. Im not able to get this to work anymore and have opened up another thread for this Link to comment
tuanphan Posted September 19, 2020 Share Posted September 19, 2020 (edited) You can use this accordion plugin. or use this free tool to add FAQ Accordion Dropdown. Edited September 15, 2021 by tuanphan Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
RolandFuseHub Posted October 5, 2020 Share Posted October 5, 2020 Hi @mford, you can also try this plugin: https://www.fusehub.ca/expand-sections. The biggest pro: you can develop a full 'section' to your liking - images/text/forms etc and hide it until you click Read More. The regular way via a markdown block is limiting because it is hard to include images and lay it out the way you want it Yaya - Slide Video.mp4 I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10. 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