How to create a numbered accordion block in Squarespace
In this tutorial, I'll show you how to Create a unique accordion block in Squarespace with large numbers (or any text!) in front of the title.
🔗 Get the rest of my code collection: https://insidethesquare.co/css
Chapters:
0:00 - Introduction
0:34 - Setting up in Squarespace
1:09 - Customizing background colors
2:05 - Editing number size and style
3:27 - Modifying accordion text
4:24 - Wrap-up and additional resources
Here is the code from this tutorial:
/* size & color */
.sqs-block-accordion .accordion-item__click-target{
background: #e5f5f6; /* accordion title background */
padding: 1rem!important;
padding-left:2rem!important;
margin-bottom:.5rem
}
.sqs-block-accordion .accordion-divider{
display:none
}
/* open item */
.accordion-item__dropdown--open {
margin-top:-.5rem;
padding:1rem;
padding-bottom:0;
margin-bottom:1rem;
background:#fff /* accordion description background*/
}
.sqs-block-accordion .accordion-item__click-target[aria-expanded="true"]{
background:#e5f5f6 /* accordion item title background when open */
}
/*large numbers */
.sqs-block-accordion .accordion-item__click-target:before{
font-size: 3rem;
transform:translatex(-1rem)
}
/* numbers: add more as needed */
.accordion-item:nth-child(1) .accordion-item__click-target:before{content:"01"}
.accordion-item:nth-child(2) .accordion-item__click-target:before{content:"02"}
.accordion-item:nth-child(3) .accordion-item__click-target:before{content:"03"}
.accordion-item:nth-child(4) .accordion-item__click-target:before{content:"04"}
.accordion-item:nth-child(5) .accordion-item__click-target:before{content:"05"}
.accordion-item:nth-child(6) .accordion-item__click-target:before{content:"06"}
.accordion-item:nth-child(7) .accordion-item__click-target:before{content:"07"}
.accordion-item:nth-child(8) .accordion-item__click-target:before{content:"08"}
.accordion-item:nth-child(9) .accordion-item__click-target:before{content:"09"}
.accordion-item:nth-child(10) .accordion-item__click-target:before{content:"10"}
Related Resources:
📝 Original blog post → https://insidethesquare.co/squarespac...
#️⃣ Block ID extension → https://insidethesquare.co/chromeext
🎓 Free Code Training → https://insidethesquare.co/learn
📚 Squarespace CSS Code Collection → https://insidethesquare.co/css
📄 How to add code to a single page → https://insidethesquare.co/squarespac...
🙋♀️ Have a question? Check out my code troubleshooting tips → https://insidethesquare.co/code-help
- -
The term Squarespace is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace Inc. The accuracy of this information is subject to change. #squarespacetips #squarespacetutorial #squarespace #learnsquarespace #learncoding #squarespacetricks #squarespacetraining #squarespacecode
Watch video How to create a numbered accordion block in Squarespace online without registration, duration hours minute second in high quality. This video was added by user InsideTheSquare with Becca Harpain 27 August 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 472 once and liked it 21 people.