How to Create an Accordion Block in WordPress Without a Plugin

Hey there! If you’ve been working with WordPress for a while, you’ve probably seen those cool accordion-style elements on websites, right?

You know, the ones that expand and collapse when you click on them? They’re not just for looks—they’re super functional, helping keep your content organized without overwhelming your visitors.

Whether it’s a FAQ section, product features, or just some general content, an accordion block is a neat way to present information.

Now, if you’re like me, you’re probably thinking, “Can I do this without adding another plugin to my site?” And I’m happy to tell you, yes! You can create an accordion block in WordPress without a plugin, and I’ll show you exactly how.

I remember the first time I wanted to add an accordion to a client’s site. I searched high and low for plugins, but none of them quite did what I wanted—either they were too bloated or didn’t have the customization options I needed.

So, I decided to do it the manual way, and let me tell you, it was way easier than I expected!

Why Create an Accordion Block Without a Plugin?

Plugins are amazing, don’t get me wrong, but they can add extra weight to your site and sometimes introduce conflicts with other plugins. Plus, if you’re working on a lightweight site or want more control over your design, manually creating an accordion block might be the way to go.

When I was setting up my own portfolio site, I wanted to add a section with a few collapsible FAQs. I didn’t want a plugin for something so simple, so I decided to use a bit of custom HTML, CSS, and JavaScript. The result? A super lightweight, fast, and customizable accordion block!

How to Create an Accordion Block in WordPress Without a Plugin

Ready to create your own accordion block? Let’s break it down, step by step, and I’ll guide you through the process using basic HTML, CSS, and JavaScript.

Step 1: Create the Accordion HTML Structure

First, you’ll need to create the structure for your accordion. This part is done in the HTML editor of the WordPress Block Editor (Gutenberg). You’re essentially creating a list of items that will expand or collapse when clicked.

Here’s an example of what the HTML structure might look like for a basic accordion:

<div class="accordion">
    <button class="accordion-button">Accordion Item 1</button>
    <div class="accordion-content">
        <p>This is the content for accordion item 1. You can add text, images, or even videos here!</p>
    </div>

    <button class="accordion-button">Accordion Item 2</button>
    <div class="accordion-content">
        <p>This is the content for accordion item 2. Pretty neat, right?</p>
    </div>

    <button class="accordion-button">Accordion Item 3</button>
    <div class="accordion-content">
        <p>This is the content for accordion item 3. You can add anything you want here too!</p>
    </div>
</div>

In the example above, each accordion item consists of a button (that the user will click to expand/collapse) and a div containing the content that will be shown or hidden.

Step 2: Style the Accordion with CSS

Now that the structure is set, let’s style the accordion. CSS will make the buttons look nice, and it will also control the visibility of the content (hidden by default, and shown when clicked).

Here’s a simple CSS you can use to style your accordion:

.accordion {
    display: flex;
    flex-direction: column;
    margin: 20px 0;
}

.accordion-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    text-align: left;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.accordion-button:hover {
    background-color: #45a049;
}

.accordion-content {
    display: none;
    padding: 10px;
    background-color: #f1f1f1;
    font-size: 14px;
    border-left: 3px solid #4CAF50;
}

.accordion-button.active + .accordion-content {
    display: block;
}

Let me explain what this CSS does:

• The .accordion class sets up a vertical stack of buttons and content blocks.
• The .accordion-button styles each button, giving it a nice green color and making it stand out.
• The .accordion-content class hides the content by default using display: none.
• When a button is clicked, the .active class will display the corresponding content by changing the display property to block.

Step 3: Add JavaScript for Interactivity

Now, let’s add the JavaScript that will make the accordion interactive. This script will toggle the visibility of the accordion content when the user clicks a button.

Here’s a simple JavaScript snippet you can add:

document.querySelectorAll('.accordion-button').forEach(button => {
    button.addEventListener('click', () => {
        // Toggle the 'active' class to open/close the accordion
        button.classList.toggle('active');

        // Get the next element (the .accordion-content)
        const content = button.nextElementSibling;

        // Toggle the display of the content
        if (content.style.display === "block") {
            content.style.display = "none";
        } else {
            content.style.display = "block";
        }
    });
});

Here’s what the JavaScript does:

• It selects all elements with the class .accordion-button.
• When a button is clicked, it toggles the active class (this changes the button’s appearance).
• It then selects the next sibling element (the .accordion-content) and toggles its visibility by changing the display property.

Step 4: Add the Code to Your WordPress Site

Now, you’ve got your HTML, CSS, and JavaScript ready to go! Here’s how to add it to your WordPress site:

1. Open the Block Editor (Gutenberg) and create or edit a post or page where you want the accordion.
2. Add a Custom HTML Block by clicking the “+” icon and searching for “Custom HTML.”
3. Paste the HTML code into the block.
4. Add the CSS into the Additional CSS section under Appearance > Customize > Additional CSS.
5. Finally, to add the JavaScript, you can either:
   • Use a Custom HTML Block in the footer or page template (if you’re familiar with editing theme files).
   • Or, you can use the Header and Footer Scripts plugin if you’re more comfortable adding it that way.

Step 5: Test It Out

Once you’ve added the code, go ahead and preview your page. Click on the accordion buttons to see them expand and collapse. If everything’s set up right, you’ll have a fully functioning accordion block on your WordPress site!

Why I Love This Method

Creating custom accordions without a plugin is one of those little tricks that has saved me a ton of time and made my sites feel faster. I love the simplicity and control it gives me over the design. Plus, it’s a perfect example of how you can do powerful things in WordPress without relying on plugins for everything.

The first time I added an accordion to a client’s site, they were thrilled with the clean, minimalist design. It didn’t just look good—it made the information much easier to digest. And the best part? It didn’t require a plugin, so the site stayed lightweight and fast.

Final Thoughts

And there you have it—a completely custom accordion block in WordPress, all without the need for a plugin. Not only does this method give you more control over your site’s performance and design, but it also helps you learn more about the core web technologies like HTML, CSS, and JavaScript.

It’s the perfect project if you want to add a little interactivity to your WordPress site, and once you get the hang of it, you’ll be creating all kinds of custom elements in no time.

As always, if you need help or run into any issues, don’t hesitate to drop a comment below. I’m always happy to help!

Happy coding! 😊