How To Add An Accordion In WordPress Site?

Accordion is a web design element of WordPress. It displays text in a collapsed, stacked manner and has multiple sections or panels that expand upon click to disclose the hidden content, click again to revert back to its original state.

In WordPress, accordions can be added through the use of plugins or Gutenberg blocks and even custom code-it, therefore is a really versatile tool for improving navigation and layout on a site.

Below are the two approaches to add an accordion in a WordPress site:

Using the Easy Accordion plugin

Step 1: Go to the plugins section

From the WordPress dashboard, navigate to Plugins > Add New.

Step 2: Search and Install the Plugin

Search for Easy Accordion Plugin after click to Install.

Step 3: Activate the plugin

Once installed, go to your Plugins web page and activate the Easy Accordion plugin.

Step 4: Create a New Accordion

When you are finished, visit Easy Accordion > Add New in the dashboard.

Step 5: To Add an Accordion Group Title

Add the title for Accordion Group. Example "GeekForGeeks"

Step 6: To Add Title and Content to the Accordion Items

Add a Title and content material to every accordion item.

Step 7: Publishing Your Accordion Items

When your accordion listing is ready Click Publish to make those items to be had.

Step 8: Adding the Easy Accordion

Click the + icon to add a block, then search for Easy Accordion.

Step 9: Insert the Easy Accordion

After finding it, your next step is drag and drop the Accordion block into your web page.

Output

Using HTML, CSS, JavaScript Code

Step 1: Log into Your WordPress Dashboard

Go to your WordPress site and sign in. Which will take you to the WordPress Dashboard, that is your site control panel.

Step 2: Access the Theme Editor

Appearance > Theme Editor on the Dashboard sidebar. Here is where you will be putting your custom CSS and JavaScript for the accordion.

Step 3: Add HTML for the Accordion to Your Page/Post

The next step is to include the HTML for the accordion in a WordPress post or page content area. Posts > Add New (or select of existing post).

Change the editor from Visual to Text (without any of the editor styles) mode allowing HTML input).

Use this accordion HTML where you want the accordion to appear:

<div class="accord">
    <div class="accord-item">
        <h3 class="accord-header">Accordion Section 1</h3>
        <div class="accord-content">
            <p>Hello GeekForGeeks Family 2.0 </p>
        </div>
    </div>

    <div class="accord-item">
        <h3 class="accord-header">Accordion Section 2</h3>
        <div class="accord-content">
            <p> Hello GeekForGeeks Family 2.0</p>
        </div>
    </div>
</div>

Save or Publish the post.

The <h3> tags act as the headers for each accordion section. The content inside <div class="accord-content"> will be hidden or shown when the user clicks on the header.

Step 4: Add CSS for Accordion Styling

Now we will style the accordion using CSS. This CSS will keep the accord-content hidden initially, which will appear only when you click on the header. Customize under Appearance.

Select Additional CSS by clicking.

Input the css code with the css classes related to your theme in the Additional CSS box

/* Write CSS Here */
.accord-content {
    display: none; /* Initially hide the content */
    padding: 10px;
    border-top: 1px solid #ccc;
}

.accord-header {
    cursor: pointer; /* Changes cursor to pointer on hover */
    padding: 10px;
    background-color: #f1f1f1;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}

.accord-header.active + .accord-content {
    display: block; /* Display content when the header is clicked */
}

Click Publish to save the CSS changes.

.accord-content is hidden by default with display: none. When the user clicks on an accordion header (defined by .accord-header), the content (.accord-content) will be displayed. The cursor: pointer property makes the accordion header more interactive.

Step 5: Add JavaScript for Accordion Functionality

When users click on the headers, JavaScript will take care of the interactive features, such as expanding and collapsing the material.

Using the WPCode Plugin as an example:

• Go to Plugins > Add New and look for WPCode to install the plugin.
• Install and activate it.

• Go to Code Snippets > Click on the header and Footer.

Put your JavaScript code in the section marked "Scripts in Footer."

<script>
document.addEventListener('DOMContentLoaded', function() {
    var headers = document.querySelectorAll('.accordion-header');
    headers.forEach(function(header) {
        header.addEventListener('click', function() {
            this.classList.toggle('active');
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
            }
        });
    });
});
</script>

Click Save File to save the changes.

Clicks on the accordion headers (.accord-header) trigger this JavaScript code. It can be clicked to show or hide the matching content (.accord-content) by twiddling its display property. To maintain track of which header is open, the. Active class is added or removed. Once your WordPress website has been updated with HTML, CSS, and JavaScript, it is ready to use.

Output: