Skip to main content

Found what you have been looking for?

Generic filters
Exact matches only
Filter by Categories
Lightroom Plugin
Tools and Tips

Try these: contact formbuttonbuy photos

Clean accordion panel for your site

I have been asked by a few readers of my portal how to create a panel on SmugMug that would allow it to display information after clicking on the header of a specific section.  Something like in this animation:

You can also test drive the panel here.  Once you have opened the page – just scroll down to the OUR SERVICES section and click on any of the sections to reveal its content.

This can only be done using HTML and CSS code.  So let’s dive into the tutorial.

HTML code

Add an HTML content block to a page where you would like to add this panel to. And then add this code to it:


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Support this PORTAL

I am writing this portal in my free time and I pay for it myself. So, if you want to support my work – use this button to buy me a coffee 🙂 Which will help towards the hosting costs of the portal.