Adding An Accordion Dropdown in WordPress

Accordion menus in WordPress are an excellent way to present a large number of categories, pages, or options without overwhelming your website visitors. If you've got a lot of content but want to keep things clean and organised, WordPress accordion menus are the perfect solution. They expand and collapse, allowing users to click on sections they are interested in, saving space and reducing clutter.

In this blog, we'll dive into some key types of accordion menus you can use in WordPress, from category accordions to WooCommerce menus.

Table of Contents

1. Setting Up an Accordion Menu in WordPress
2. Category Accordion in WordPress
3. Horizontal Accordion Menu
4. Menu Accordion in WordPress
5. Conclusion

What is an Accordion Menu in WordPress?

A WordPress accordion menu works like the folds of an accordion – it expands when clicked and collapses back down when not in use. This style is often used in navigation menus, FAQs, and category lists because it improves usability by hiding less relevant options until the user chooses to explore.

Setting Up an Accordion Menu in WordPress

Adding an accordion menu to your WordPress site is simpler than you might think. Depending on your theme and preferences, there are several plugins available that let you create and customise accordion menus easily. Some popular ones include:

• Accordion Menu by WPDeveloper
• Elementor (for custom widgets)
• WP Responsive Menu

Category Accordion in WordPress

A category accordion is especially handy for blog-heavy websites or online stores. It collapses blog categories or product categories into an expandable list, improving navigation by letting users focus on the section they’re interested in.

You can create category accordions with a plugin like Category Accordion Plugin, which works with WooCommerce as well. This is a must-have for websites with a large number of product categories.

Horizontal Accordion Menu

Most WordPress accordion menus are vertical by default, but if you want a more unique look, a horizontal accordion menu is an excellent alternative. Instead of stacking items vertically, the horizontal accordion arranges them side-by-side, expanding across the width of the screen when clicked.

For horizontal accordion menus, plugins like Accordion Slider are a great option. They combine the visual appeal of a slider with the interactive functionality of an accordion.

how to do accordian dropdown in wordpress without using a plugin

Create HTML Structure for the Accordion

To add an accordion dropdown to your WordPress site, you can directly insert some code into your posts, pages, or theme files. An accordion is essentially a way to show and hide content when you click on a header.

In simple terms, imagine a list of items where each item has a clickable title (the header) and hidden content beneath it. When you click on the title, the content appears, and when you click it again, the content disappears.

To make this work, you’ll need to use a special structure called HTML. For each accordion item, you’ll create a container (a box, often called a <div>) that holds two parts:

1. A clickable title (header).
2. A section of content that will expand or collapse when the title is clicked.

You can add this code in your WordPress editor for posts or pages, or you can place it directly into the theme’s files if you're comfortable editing those.

Here's an example of the HTML structure:

<div class="accordion-container">
  <div class="accordion-item">
    <button class="accordion-header">Accordion Item 1</button>
    <div class="accordion-content">
      <p>This is the content for Accordion Item 1.</p>
    </div>
  </div>
  
  <div class="accordion-item">
    <button class="accordion-header">Accordion Item 2</button>
    <div class="accordion-content">
      <p>This is the content for Accordion Item 2.</p>
    </div>
  </div>
  
  <div class="accordion-item">
    <button class="accordion-header">Accordion Item 3</button>
    <div class="accordion-content">
      <p>This is the content for Accordion Item 3.</p>
    </div>
  </div>
</div>

Add CSS for Styling

To make your accordion look good and work properly, you’ll need to add some CSS (which is the styling part of the code). This will hide the content by default and give the clickable buttons a stylish, interactive look.

In simple terms, CSS helps you control how things appear on your website. For the accordion, it will ensure that the content is hidden until the user clicks on a title, and it will also style the buttons to make them look like clickable items.

You can easily add this CSS to your WordPress site by going to your dashboard, clicking Appearance > Customize > Additional CSS, and then pasting the code there. Alternatively, if you’re comfortable with it, you can also add the CSS directly to your theme’s stylesheet file. This will apply the styles across your entire site.

/* Container for all accordion items */ .accordion-container { width: 100%; max-width: 600px; /* Adjust width as needed */ margin: 0 auto; } /* Style the accordion headers */ .accordion-header { background-color: #0073e6; color: white; padding: 10px; text-align: left; width: 100%; border: none; outline: none; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } .accordion-header:hover { background-color: #005bb5; } /* Style the accordion content */ .accordion-content { padding: 10px; display: none; /* Hide content by default */ background-color: #f9f9f9; border-left: 3px solid #0073e6; } /* Active class to show content */ .accordion-content.active { display: block; }

Add JavaScript for Interactivity

JavaScript is used to make the accordion interactive. It handles the click action when a user clicks on an accordion header (the title). When clicked, the JavaScript will show or hide the content beneath the title, depending on whether it's already open or closed.

In simple terms, JavaScript is what makes the accordion "work." It listens for when a user clicks on a title and then decides whether to open the content or close it.

To add this functionality, you’ll need to insert the JavaScript at the bottom of your page or add it to your theme’s JavaScript file. If you're editing a page directly, you can include the script there, or if you’re working with the theme, you can place it in the theme’s script file. This allows the accordion to be fully functional on your website.

// Wait until the document is fully loaded document.addEventListener('DOMContentLoaded', function() { // Get all the accordion headers var accordions = document.querySelectorAll('.accordion-header'); // Loop through each accordion header accordions.forEach(function(accordion) { accordion.addEventListener('click', function() { // Toggle the active class on the clicked accordion item var content = accordion.nextElementSibling; content.classList.toggle('active'); // Optionally, close all other accordion items when one is clicked accordions.forEach(function(otherAccordion) { if (otherAccordion !== accordion) { otherAccordion.nextElementSibling.classList.remove('active'); } }); }); }); });

Final Steps

• If you're adding the accordion to a specific page or post on your WordPress site, you can easily do this by pasting the HTML, CSS, and JavaScript directly into the post. You would use the Custom HTML block or another HTML editor to insert the code, which will allow you to add the accordion functionality right where you want it.
• If you're adding the accordion to your theme (or a child theme), you’ll need to place the HTML code in the part of the theme where you want the accordion to show up. For example, you could add it to a page template or a specific post template, depending on where you want the accordion to appear.
• Finally, make sure the CSS is applied correctly—either globally across the whole site or specifically to the page with the accordion. This will ensure that the styling works properly and your accordion looks as expected.

Menu Accordion in WordPress

If you're looking to compress a long WordPress menu, using an accordion style is one way to ensure it doesn't overwhelm your visitors. You can set up a menu accordion using plugins like WP Mega Menu or Max Mega Menu, which allow you to incorporate accordion functionality.

Alternatively, if you prefer not to use a plugin, you can create a custom accordion-style menu by following a manual approach. This involves adding some HTML, CSS, and JavaScript directly into your WordPress theme or page content. With this method, you can control the appearance and functionality of the accordion without relying on a plugin. Simply insert the HTML for the accordion structure, style it using CSS to hide the menu items by default, and add JavaScript to make the menu interactive (i.e., showing or hiding menu items when clicked).

This approach gives you more control and flexibility, especially if you want a lightweight solution without adding additional plugins to your site.

---