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:

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