1. Home
  2. Customization
  3. Custom accordion panel for your site

Custom accordion panel for your site

Intro

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:

Information

The HTML section is the section where you will add all of the text, which will appear in your panel.  Here are a few tips if you are not familiar with HTML code:

Everything between <h1> MY TITLE </h1>will be the header/title of your panel – in my case it is OUR SERVICES.
Everything between <h2>MY SECTION </h2> will be the title of each section of your panel – in my case they are PHOTOGRAPHY AND RETOUCHING, STUDIO HIRE, HIGH QUALITY PRINTS and PHOTO BOOKS.

Everything between <p>My text</p> will be the paragraph that appears in each section of the panel.

 To make this even clearer I have made notes for each section in the HTML code.

 

CSS code

At the moment the whole panel does not look as on my demo – this is because you have not added the CSS code to the same HTML content block { CSS TAB }:

CSS Tab in the HTML content Block SmugMug

You will need to copy and paste this code to the CSS tab of your HTML content block.  It may look very complicated at first – but do not worry, you only need to think about one section of this code, which I will explain later:

After adding the code you will see that everything looks exactly the same as in my demo.  I know the fonts may look different from my demo – but this is because you are probably using a different theme on your site.

 

Adding or removing additional sections

Adding or removing sections from the panel is easy because you just need to tweak the HTML and CSS a little bit:

HTML changes

In the HTML code you need to copy the last section – in this case, it will be the FOURTH SECTION and paste it below the closing &lt;/li&gt; tag:

Of course, you have to replace the SECTION TITLE  and the SECTION PARAGRAPH with the new content that you would like to appear in this new section.

If you would like to remove any of these sections – just delete that section from the code.

CSS changes

The CSS code for this panel is quite long – this is because it uses some code to animate the panel.  But I want you to find this section in the CSS code { CSS TAB of the HTML content block }:

This is the only part of the CSS code that you are interested in. This part of the code is responsible for animating each of the sections of the panel one after another. Since we have 4 sections in my demo – I have four sections in the code.

So if I would add a fifth section to my panel – I would need to copy the last part of the code:

And change the number at the end to 5 and add 0.25 s to the delay of my animation so the finish code should look like this:

Of course, if you want to have fewer sections – just remove each line of code that you do not need.  For example, you have only three panels – the code would then look like this:

 

Updated on March 22, 2017

Was this article helpful?

Related Articles

Comments

  1. Is it possible to change or create a background color for the accordion panel? Such as having a black background on Smugmug, and a white background for black text when it opens up the accordion panel? Instead of remaining transparent to the current background on Smugmug? Thanks!

    1. KG,

      Yes, there is a possibility to change the colours of the accordion – you would need to make those changes in the CSS code. The CSS section is responsible on how the accordion looks { fonts, colours etc. }.

Leave a Comment