How to create a numbered accordion block in Squarespace

[@albertjans]

Thanks for your great tutorial 😊😊

[@InsideTheSquare]

I'm so glad you liked this one; thanks for letting me know! ☺️

[@katebsocial]

Another helpful one, thanks Becca!

[@InsideTheSquare]

You are so welcome - glad you liked it! :)

[@therealnikicc]

I literally love you, you resolved me so many problems with my site, keep up the good work ♡, and I was wondering if you could show us how to make a pill in the navbar which includes like: the menu text and then the menu icon, with nothing more, even without the logo, it would be great if you do that, thanks in advance

[@InsideTheSquare]

Thank you so much - I'm glad you like my work 🥰 That's a great suggestion! its definitely possible with a little CSS, and I'll add it to my tutorial to do list! I'd like to do more mobile this month, so stay tuned 😉

[@LoneWolfimagesCanada]

Awesome

[@InsideTheSquare]

Thanks! I was excited about this one - I love the creative design ideas I get to share on my channel 😎

[@AmyMiskelly-j8n]

I want to add this custom code to a specific accordion block on my website. I used the squarespace ID finder to identify the block ID and placed this in front of the code which works until it comes to this section of code .accordion-item:nth-child(1) .accordion-item__click-target:before{content:"01"} Any ideas where I am going wrong? BTW I love all your tutorials, so helpful and easy to customise too

[@InsideTheSquare]

Here is the code with block id filler text: /* size & color */ #block-1234 .sqs-block-accordion .accordion-item__click-target{ background: #e5f5f6; /* accordion title background */ padding: 1rem!important; padding-left:2rem!important; margin-bottom:.5rem } #block-1234 .sqs-block-accordion .accordion-divider{ display:none } /* open item */ #block-1234 .accordion-item__dropdown--open { margin-top:-.5rem; padding:1rem; padding-bottom:0; margin-bottom:1rem; background:#fff /* accordion description background*/ } #block-1234 .sqs-block-accordion .accordion-item__click-target[aria-expanded="true"]{ background:#e5f5f6 /* accordion item title background when open */ } /*large numbers */ #block-1234 .sqs-block-accordion .accordion-item__click-target:before{ font-size: 3rem; transform:translatex(-1rem) } /* numbers: add more as needed */ #block-1234 .accordion-item:nth-child(1) .accordion-item__click-target:before{content:"01"} #block-1234 .accordion-item:nth-child(2) .accordion-item__click-target:before{content:"02"} #block-1234 .accordion-item:nth-child(3) .accordion-item__click-target:before{content:"03"} #block-1234 .accordion-item:nth-child(4) .accordion-item__click-target:before{content:"04"} #block-1234 .accordion-item:nth-child(5) .accordion-item__click-target:before{content:"05"} #block-1234 .accordion-item:nth-child(6) .accordion-item__click-target:before{content:"06"} #block-1234 .accordion-item:nth-child(7) .accordion-item__click-target:before{content:"07"} #block-1234 .accordion-item:nth-child(8) .accordion-item__click-target:before{content:"08"} #block-1234 .accordion-item:nth-child(9) .accordion-item__click-target:before{content:"09"} #block-1234 .accordion-item:nth-child(10) .accordion-item__click-target:before{content:"10"}

[@AmyMiskelly-j8n]

@@InsideTheSquare Thank you so much, I really appreciate you taking the time to fulfil my request