TLDR; I decided to figure out how to create an HTML accordion for my useful marketing tools and useful code snippets section so that I wouldn’t have to take the speed hit from javascript. If you just want to see the instructions and not my ramblings you can view them at the bottom of the page.

When I started this blog I wanted to focus on making sure my site was quick to use on any device on any connection. This meant the usual of compressing images, preconnects and removing any unnecessary javascript I could find on my site. This was more important when I was using my old theme, Impreza, as this theme allowed me to turn off elements I wasn’t using such as the dropdowns, animations, carousels and maps to reduce the amount of CSS and Javascript that was loading. 

This was a great feature and definitely helped to improve my site speed however by using the accordion feature that was in my theme it caused it to be added to the CSS and Javascript that was loading on every page. This wasn’t great as I was only using on two pages on my site, yet caused a speed impact sitewide. I tried using a plugin called Asset Cleanup Pro to try and clean up the CSS and Javascript that was loaded with each page however as my theme bundled it all into one CSS and one Javascript file it was very difficult to pull out these elements. However, I would very much recommend the plugin as I have used it on the Swift themes and page builder and it makes a massive difference to site speed.

To solve this issue I looked online for someone else that had created an accordion using just HTML and CSS as this would solve two problems. The first being that removing javascript would keep those page fast on a mobile device, on a mobile connection. The second being the CSS for the accordion would be kept to just those two pages so I could make sure that for each page only the necessary CSS was loading, again reducing bloat.

The code below shows you how you can make your own accordion using only HTML and CSS.

CSS To Style Our HTML Accordion

<style>

.border {

border: 3px solid #CCE4FC;
padding: 10px;
margin-bottom: 5px;
}

details summary::-webkit-details-marker {
background: url(https://chaykelly.com/wp-content/uploads/2020/02/Plus.svg) center no-repeat;
color: transparent;
}

details[open] summary::-webkit-details-marker {
background: url(https://chaykelly.com/wp-content/uploads/2020/02/Minus.svg) center no-repeat;
color: transparent;
}

</style>

The CSS above allows us to style our HTML to look like an accordion. The class, .border is the border around our collapsed accordion and you can use all of the usual CSS border elements, if you unsure of them w3schools has a great resource on them. For my border, I have chosen to go for a solid, light blue border that's 3px wide and I've also added some padding and a margin to make sure it all looks evenly spaced and not crammed against the border of my accordion.

The next two elements are what we use for the icon to help show the user this is an accordion they can click on. For my HTML accordion, I have gone for a simple plus and minus symbol to show whether the accordion has been clicked on.

The HTML Code For Our Accordion

<details class="border">

    <summary>Accordion Title</summary>

    <p>Our inner accordion content goes here</p>

 </details>

The HTML above is our accordion itself. The details tag holds everything together and it's also where we apply our .border class so it's styled like an accordion and the user understands that it can be opened and closed.

The summary tag is where we add the headline to the accordion. This is what's visible and encourages the user to open it up and read the inner content. Our inner content can be whatever we would like it to be using the usual HTML tags such as <img>, <a>, <div>, <p>, etc. My accordions all follow a similar pattern which is a title, inner content that explains the code/tool, then a divider and below that a link and a price if it's applicable.

Hopefully, you should now be able to create and style your own HTML accordion and take advantage of the benefits of not having to use Javascript. If you need any help with your accordion just pop me a message below and I'll get back to you as soon as I can!

Step By Step Guide To Build Your Own HTML Only Accordion

1. Copy The CSS Above
   Copy the CSS from the CSS section above and either add it to your stylesheet or add it to the <head> section of the pages where you want to use an accordion.
2. (Optional) Edit The CSS To Match Your Website Style
   Edit the CSS above so it matches the style of your website. This could be changing the border colour, style or width as well as changing the open and closed icons for your accordion.
3. Copy The HTML
   Copy the HTML from the HTML section above and add it to the page where you'd like to display the accordion. If you're using the default Gutenberg editor make sure to use an HTML block.
4. Edit The HTML
   Edit the HTML so that it displays the title and inner content you'd like to show to your website visitors.
5. Test It Looks As Expected
   Once you're happy with the styling and the content quickly check how it looks on the front end of your site!