How to Add Accordion Without Using Plugin to WordPress Blog

by

Minimalistic workspace showing a laptop with WordPress editor open, featuring HTML, CSS, and JavaScript code snippets on screen, with coffee cup and notebook on desk

In this step-by-step guide, you will learn how to add an accordion to your WordPress blog without using any plugins. An accordion is a web feature that displays headers stacked on top of one another. When a user clicks a header, the hidden content expands. If clicked again, it collapses. This method keeps your webpage neat and well-organized.

Let’s dive into the easy process!

Why Use an Accordion in WordPress?

  • Improves user experience: Content stays hidden until needed.
  • Saves space: Ideal for FAQs, long content, or menus.
  • Lightweight solution: Avoid using bulky plugins.

Steps to Add an Accordion Without a Plugin

You can easily achieve this using HTML, CSS, and JavaScript.

Step 1: Add Custom JavaScript Code

Use Header Footer Code Manager to insert JavaScript into your WordPress site. Here’s how:

  1. Install the Header Footer Code Manager plugin.
  2. Go to Settings > Header Footer Code Manager.
  3. Paste the JavaScript code (given below) into the header or footer section.

Step 2: Accordion HTML Code

Copy the following code to your post or page where you want the accordion:





  
This is the content inside the accordion.

You can repeat the above code as needed to create multiple accordion sections.

Step 3: Custom CSS Code

Add the following CSS to your WordPress Appearance > Customize > Additional CSS section:

css
/* Accordion CSS */
.wpfaccordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
.wpfaccordion-active, .wpfaccordion:hover {
background-color: #ccc;
}
.wpfaccordion:after {
content: '\02795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.wpfaccordion-active:after {
content: "\2796";
}
.wpfpanel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.wpfpanel p {
margin-top: 15px;
}

Step 4: JavaScript Code for Accordion Functionality

Add this JavaScript code using Header Footer Code Manager or paste it into the footer section of your theme:

See also  15 Top One Page Wordpress Theme: Make Professional Website with a Single Page Design
javascript
<script>
var wpfaccordion = document.getElementsByClassName("wpfaccordion");
var i;for (i = 0; i < wpfaccordion.length; i++) {
wpfaccordion[i].addEventListener(“click”, function() {
this.classList.toggle(“wpfaccordion-active”);
var wpfpanel = this.nextElementSibling;
if (wpfpanel.style.maxHeight) {
wpfpanel.style.maxHeight = null;
} else {
wpfpanel.style.maxHeight = wpfpanel.scrollHeight + “px”;
}
});
}
</script>

Final Look and Usage

  • Accordion Header: The clickable button at the top.
  • Panel Content: The content section revealed when the button is clicked.

You can customize the colors and sizes by editing the CSS code above. Here’s how the accordion works:

Action Result
Click the header Content expands and becomes visible
Click again Content collapses
Hover over the header Header changes color for better visibility

Benefits of This Approach

  • No plugin required – Avoids slowing down your site.
  • Customizable – Adjust colors, padding, or transitions.
  • SEO-Friendly – Works smoothly without impacting performance.

Adding an accordion without a plugin is simple and gives you more control over your site’s design. Just use HTML, CSS, and a little bit of JavaScript. Now, your visitors can enjoy a clean, interactive layout!

Try this on your site and see how it enhances the user experience.

Leave a comment