Click to Reveal a Section on Squarespace
Don’t freak out, but I finally figured out a hack for one of the most requested features on Squarespace: reveal an entire section on button click!
🔗 Original post:
https://ajmexperience.com/learn-posts...
🎥 Subscribe for more Squarespace CSS Hacks and tips:
/ @ajmexperience
💡 For more Squarespace tips to enhance your website designs, check out the rest of the learn series: https://ajmexperience.com/learn
🖥️ Save hours of wireframing and mobile optimization with our Layout Templates
https://www.ajmexperience.com/squares...
📌 Follow along on Pinterest:
/ ajmdesignstudio
📖 Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...
📚 Get our full CSS Library:
https://www.ajmexperience.com/squares...
📸 Follow us on Instagram:
/ ajmexperience
——————
✨HERE'S THE CSS:✨
First, add an anchor link:
Add an anchor link to the section you want to appear on click by going to Edit Section - Design - scroll down to Anchor Link - add the word you want to use. I’ve used the word reveal in this tutorial.
Copy and paste this CSS into the Custom CSS panel. Again, make sure to replace the word reveal if you’re using a different word for your anchor link.
// initially hide section //
#reveal {
display: none; }
// reveal hidden section when button is clicked //
#reveal:target {
display: block; }
——————
🛠️ Our Favorite Tools:
✨ ElfSight ⇨ https://go.elfsight.io/click?pid=1575...
💻 AJM Squarespace CSS Library ⇨ https://www.ajmexperience.com/squares...
👻 Ghost Squarespace Plugins ⇨ https://ghostplugins.peachs.co/a/ajme...
🧩 SQSP Themes Plugins ⇨ https://transactions.sendowl.com/stor...
📐 Squarespace Layout Templates ⇨ https://www.ajmexperience.com/squares...
🌐 Squarespace ⇨ https://squarespace.syuh.net/c/496021...
——————
AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/
☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm
Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed well over 100 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.
——————
⚠️ This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)