Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉 https://insidethesquare.co/learn
—
In this tutorial, we’ll create click-to-reveal text in your Squarespace website. Great for FAQ sections, this expanding section / accordion magic is made up of HTML and CSS so it will work on any subscription level; no Javascript required!
The codes in this tutorial are listed below – one set on this description and the other in the first comment – but make sure you watch the entire video so you will know exactly what to change on your own site. You can also grab the codes + the step-by-step instructions at https://insidethesquare.co/squarespace-tutorials/click-to-reveal
Oh! And if you need any help along the way, head on over to https://insidethesquare.co/code-help to see my current support options.
Here is the CSS part of the code that creates the click to expand action and any custom styles you want to try. The actual content on your site needs a different code that can be found in the first comment below.
#click-reveal div {
position: relative;
}
#click-reveal input[type=”checkbox”] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
#click-reveal h2 {
font-size: 30px;
font-weight: 400;
margin: 20px 0 0;
}
#click-reveal label {
position: relative;
display: block;
padding-left: 30px;
}
#click-reveal label::before {
content: “”;
position: absolute;
width: 0;
height: 0;
top: 50%;
left: 10px;
border-left: 8px solid black;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
margin-top: -8px;
}
#click-reveal input[type=”checkbox”]:checked ~ h2 label::before {
border-left: 8px solid transparent;
border-top: 8px solid black;
border-right: 8px solid transparent;
margin-left: -4px;
margin-top: -4px;
}
#click-reveal p {
max-height: 0;
overflow: hidden;
padding-left: 30px;
transition: max-height 0.4s ease;
}
#click-reveal input[type=”checkbox”]:checked ~ h2 ~ p {
max-height: 80px;
}
—
🤩 Ready for more codes? The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you’re ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy 👉 https://InsideTheSquare.co/css
—
🥳 Ready to launch ? Use the code PARTNER10 for 10% off (affiliate code): https://insidethesquare.co/partner10 ❤️
—
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
—
The term “Squarespace” is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥
—
#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips
