Jump to content

Create two titles in the accordion with code

Go to solution Solved by inside_the_square,

Recommended Posts

Hello, I'm trying to create the accordion with 2 titles one on top of the other and one with text in bold to look like the example attached. The fonts are all added using CSS. 

Thank you

Screenshot 2024-07-11 at 11.09.50.png

Edited by BloomStudio
Link to comment
  • Solution

Love this idea - your design is fabulous!! Here is a quick code fix with a custom tutorial for ya; hope it helps 🙂

 .accordion-item__title:after{
  white-space:pre;
  font-size:10px;
     letter-spacing:.2rem
}
#block-yui_3_17_2_1_1720686858477_10054.sqs-block-accordion .accordion-item:nth-child(1) .accordion-item__title:after{
  content:"\A DESIGN STUDIO MANAGER";
}
#block-yui_3_17_2_1_1720686858477_10054.sqs-block-accordion .accordion-item:nth-child(2) .accordion-item__title:after{
  content:"\A SR INTERIOR DESIGNER";
}
#block-yui_3_17_2_1_1720686858477_10054.sqs-block-accordion .accordion-item:nth-child(3) .accordion-item__title:after{
  content:"\A JUNIOR INTERIOR DESIGNER";
}
#block-dbbd037fdbc82037947a.sqs-block-accordion .accordion-item:nth-child(1) .accordion-item__title:after{
  content:"\A PT MANAGER & SR ARCHITECT";
}

 

🤓 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.