How to create a numbered accordion block in Squarespace

Опубликовано: 27 Август 2024
на канале: InsideTheSquare with Becca Harpain

472

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

Смотрите видео How to create a numbered accordion block in Squarespace онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь InsideTheSquare with Becca Harpain 27 Август 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 472 раз и оно понравилось 21 людям.

1,953