Accordion Blocks in Squarespace - New Feature! // Squarespace Accordion

[@InsideTheSquare]

⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: kzbin.info/www/bejne/m6atonuOqMR_Z68

[@VicHooper]

Hallelujah! Thanks, Squarespace and thanks Becca for bringing it to our attention.

[@InsideTheSquare]

I was SO happy to see this new content block too!! Super excited to see what happens inside 7.1 next! 🥳

[@jonellegood8816]

So glad Squarespace has made this a native option to their design build and we don't have to make this style work with custom code anymore. Thanks for taking some time to show off the features. I always appreciate your quick and helpful tutorials that are packed with great content.

[@InsideTheSquare]

I was so happy to see this too! And you are so welcome - I think that sharing exciting feature updates like this is *almost* as much fun as creating custom codes. Almost. 😉

[@jonellegood8816]

@@InsideTheSquare well, you're great at both. So keep it up!

[@philpallen]

THANKS for the awesome tutorial. I haven't tried this yet, but now I'm totally equipped to give it a whirl. You're simply the best!

[@pearllaw]

Very clear demonstration, thanks!

[@InsideTheSquare]

Yay! So happy I could help! 🙌🏻

[@fionaharrison9314]

Thanks for this, exactly what I was looking for!

[@InsideTheSquare]

Awesome - glad I could help! :)

[@meaganjustus]

It's great we don't have to code for this anymore!! (not that it was hard before but easier for clients to update and make changes themselves now!) Thanks for the tutorial 😊 Have a great day!

[@InsideTheSquare]

Right?! I’m so glad they made this a built in feature!! 🙌

[@eddiechan707]

Hello! When the accordion expands and collapses, it moves blocks that are beside it. Is there a code that can stop the adjacent content from moving? I get that the blocks under the accordion moves since it directly affects them, but would love to know if there is a code that stops the adjacent content from moving. Thanks!

[@InsideTheSquare]

Christy Price shared a great tip for this at the 10:53 minute mark in this video: kzbin.info/www/bejne/fHeriImPmcubm9E

[@eddiechan707]

@@InsideTheSquare OMG, such a simple workaround, how could I not figure this out?🤦‍♂. Thank you so much!

[@creativewebusa]

Another great video @InsideTheSquare ! I have a tough question for you today, is it possible to add a summary block within an accordion ? I have tried numerous ways to try and get the Summary block to show up within an accordion but no luck so far. Basically, the accordion heading will show * it should be closed at first ) then when you click on the accordion heading it opens just as it normally would but it should display a summary block of posts etc. Any idea how to accomplish this i would be extremely grateful

[@InsideTheSquare]

Great question! Unfortunately using the built in accordion block we can only add text. But you can try the DIY method using this older tutorial of mine - hope it helps! insidethesquare.co/squarespace-tutorials/click-to-reveal

[@speakaus8681]

Your video's are very helpful thank you! If my site has more than one accordion (on different pages) is there a way to code a different colour for each accordion? Thanks in advance.

[@InsideTheSquare]

Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉

[@bellagetsbold]

Yessss! Perfect timing, have just been stuck on an accordion markup code dilemma for my program FAQs - so stoked to be able to scrap that & just use this simple accordion block instead 🥳 thank you for bringing it to our attention so quickly Becca! 🙌🏼

[@jackquinn314]

Is there a way to have accordion blocks open to separate galleries of videos? I want to organize some embedded videos by collapsing them within an accordion-style design. Please let me know if you have a tutorial that covers something like this!! Thank you.

[@InsideTheSquare]

Hey Jack- Great question! I'm working on more video related tutorials this year and I’ll definitely add this to my tutorial to-do list; stay tuned 😉

[@alexrackovs3978]

Hi, how do you change colour of the text inside the accordion?

[@InsideTheSquare]

Hey Alex! You can use a little custom CSS to change up the color; change the word purple in this code below to the color you want to see and add it to your CSS panel under Design > Custom CSS .sqs-block-accordion .accordion-item__description {color: purple!important} To learn more about the types of color you can use, check out this article here: insidethesquare.co/colors

[@AboundWebDesign]

So is there a way to use custom fonts in the description area in the accordion block? I'm needing to use a font not available natively in Squarespace.

[@InsideTheSquare]

Totally! I don’t have a tutorial on that yet, but I do have the code. Feel free to send me an email and I’ll share it with ya (support-at-insidethesquare.co) and in the meantime I’ll add this to my tutorial to do list!

[@dalestalnaker7646]

Thanks! I am trying to convert a WordPress site with accordions to Squarespace and still utilize accordions to consolidate content. can images be inserted into the accordion?

[@InsideTheSquare]

Hey Dale! You can't add an image or table to an accordion block but you can code your own! Here is an old tutorial that will walk you through it: insidethesquare.co/squarespace-tutorials/click-to-reveal

[@dalestalnaker7646]

Thanks for your reply, but the above referenced video said _nothing_ about inserting _images_ into the accordion content. Is this even possible? If so, how? Also, my wordpress website had accordions containing tables. Can tables be inserted into the accordion content? How?

[@corinnecuozzo3677]

Anyone know how to update the font size for these? I want the FAQ titles to be larger

[@InsideTheSquare]

Hey Corinne! This code will do the trick - change 30px to whatever size you want the font to be. .accordion-item__title {font-size: 30px}

[@adrianemarie6381]

Question about the new accordion block... Do you know if the description text (Paragraph 1, Paragraph 2, etc.) within the accordion is able to rank in SEO? Since it isn't "visible" until expanded I'm wondering if it crawls the same. SS support did not know the answer to this question. Great video Becca! Very thorough. Keep up the helpful tutorials.

[@InsideTheSquare]

That is a great question - and I have no idea! I'll reach out to one of my fav Squarespace SEO experts and get back to ya on that... stay tuned!

[@adrianemarie6381]

@@InsideTheSquare Hey Becca! Any updates on this?

[@theclassroomnook5501]

Thanks so much for this update! I am using this for an FAQ block on a post. Do you know if there is any easy to copy and paste this entire accordion block on another page of my website without having to recreate it question by question? Thanks so much!

[@InsideTheSquare]

I wish - that would be so helpful! But sadly 😞

[@steve_aventura]

Can you add an image instead of text in an accordion item?

[@allanstanley9590]

Or both text an an image... I am using a third party code that does that, but does not provide the ability to modify text etc. the way the Squarespace has done. Perhaps some code from ITS...

[@InsideTheSquare]

Oooh I love this idea! I’ll definitely add this to my tutorial to-do list; stay tuned 😉

[@chenesebeanmua]

Thank you for this. Plus I just noticed that SP now has this feature. However I'd like to embed a form (that's not SP) using this feature, would you know how to do that if possible?

[@InsideTheSquare]

Hey Chenese! That's a tricky one - embedding a function inside of another function can be complicated. I'd be happy to work up a fix for ya - feel free to email me a link to the site with the form on it and I'll see what I can do! 👍👍

[@govbradford]

Great tutorial! With all the settings they have in this block, once you fine tune it, is there a way to duplicate it so you can easily add another with the same settings?

[@InsideTheSquare]

Great question! I'll have to brainstorm on this one; probably possible with some clever CSS. If I am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!

[@govbradford]

@@InsideTheSquare It would!

[@courtneyhinton7570]

Is there a word limit to what can be put into the accordion? I have some text missing on my accordions and I can't figure out why.

[@InsideTheSquare]

Interesting - Not that I’m aware of! I even have full podcast episode transcripts in an accordion. I would reach out to Squarespace support team to see if they can take a look - something’s not quite right there ☹️ Good luck!

[@Cayley.yzsabelle]

can we add video inside accordion?

[@InsideTheSquare]

Depending on what Squarespace plan you have, you can. You can find out more from this post on the official Squarespace Forum: forum.squarespace.com/topic/220463-embed-a-video-within-the-accordion-drop-down-menu/

[@nataliehendrix7397]

Are you able to make the text on the block go the other way? Like instead of it reading up and down, could you use code for it to go left to right?

[@InsideTheSquare]

Great question Natalie! I'll have to brainstorm on this one; probably possible with some clever CSS. if i am able to create a code for it, I'm sure it will make a great tutorial so stay tuned!

[@JaiSequoia]

It’s a great addition but still doesn’t compare to accordion plugins where you can add any content in each section (any other kind of block!) but it’s a nice feature. Hopefully they’ll add colour options in there too.

[@InsideTheSquare]

Wouldn't that be the best? Until then, CSS to the rescue! 😅 haha

[@lynnzetaylor3276]

Can you help me figure out why all of the content on my products in the accordion blocks are all getting changed to the same thing?

[@InsideTheSquare]

I would definitely recommend reaching out to the official Squarespace support team for help: support.squarespace.com

[@outpost44vfx]

ug. We can't add pictures or put the content in tables in the description? The custom code version was alot more versatile.

[@InsideTheSquare]

I agree 😬 But at least we finally have this built in; hopefully it’s a sign of more cool features in the not too distant future! 🤞🤞

[@davidledger1960]

Yes! Now my clients will stop pretending how to code and screwing up all my accordion markup!

[@InsideTheSquare]

Hahahaha - perfect! 😅