Jump to content

Formatting text inside of an accordion

Recommended Posts

Hi everyone! I was wondering if there's a way to change the formatting of text inside an accordion. I'm able to easily change the font size, font family, etc. in an accordion, but can I change different parts of the accordion inside? For example, is it possible to have a paragraph of text, then another paragraph of text set inside a colored box? Can I center one part of the accordion's text and left align another part? Thanks!

Link to comment
22 hours ago, hannahwirth said:

Hi everyone! I was wondering if there's a way to change the formatting of text inside an accordion. I'm able to easily change the font size, font family, etc. in an accordion, but can I change different parts of the accordion inside? For example, is it possible to have a paragraph of text, then another paragraph of text set inside a colored box? Can I center one part of the accordion's text and left align another part? Thanks!

Can you share your URL so I can check it?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@hannahwirth this is a great question! We don't have a lot of HTML formatting available inside the accordion block, but we do have some options if we get creative with text styles 😉 If you make some text bold or italic, we can isolate that text type using CSS.

Here is an example of a code that customize the bold text inside an accordion description, giving it a different color background. I also added a little padding so the text wasn't flush with the edge of the new background - check out the image to see the example code in action!

I hope this helps with your project. Feel free to reach out if you have any other questions. I also have a few accordion block style tutorials you might like; I even created a code to add images inside accordions 🙌 https://insidethesquare.co/squarespace-tutorials/tag/accordion

.accordion-item__description strong{
font-weight:normal!important;
padding:.25rem;
background:#fff;
}

 

Screenshot 2024-05-24 at 12.09.08 PM.png

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.