How to Add an Accordion Dropdown to Your WordPress Website
Your main objective when developing a website should be to provide the information your visitors are looking for as soon as possible, in a more professional and user-friendly manner, and in as little space as possible. Visitors are looking for comprehensive information that is displayed clearly on the website. They scan through a lot of material to get what they're looking for, and if your website is busy and full of information, they'll probably leave disappointed.
Keep a page organised and simple to navigate by using an accordion dropdown menu. It is the finest technique to fit a variety of content into a tiny area. It shortens any overly lengthy web pages and lessens clutter.
What is accordion dropdown?
In a nutshell, an accordion dropdown is a style for showing material in a vertically stacked list of headings that may be clicked to expose or hide content. Each concealed area will have a title and a visual signal, such as a plus sign or arrow button, to show that it can be expanded. These books will be presented graphically as a vertical list.
The concealed text and graphics are revealed when a visitor clicks on one of the titles. Panels may be collapsed once more.
Each WordPress accordion menu consists of two sections:
Why should we use accordion menu?
Your website's usability can be increased even more by an accordion dropdown by:
Where should we use accordion menu?
Here are some examples of accordion uses:
How to Add an Accordion Dropdown to your WordPress Site
1. Guttenberg blocks
To generate content layouts, the new WordPress block editor, also known as Gutenberg, uses editor blocks called "Gutenberg blocks." WordPress 5.0 introduced the Gutenberg editor, a totally block-based editor where each piece of content is a draggable block. It is more reliable due to:
WordPress Accordion Plugins:
Once you’ve installed a plugin, then follow the following steps:
- To add a new block to the editor, click the "+" sign. Then, to identify the appropriate block more easily, type "accordion" into the search area.
- Each toggle in the accordion group needs a title, as well as content that can be created or edited and displayed when the accordion is accessed. Rep each group block for the accordion.
- Choose which accordion panes you wish to open in step three. Choose whether each new pane shuts the preceding one or whether many panes can be open simultaneously.
- Modify the block colour and spacing parameters to create a customised appearance. You can match your website's theme or copy the style of one that you like better.
2. Code
If you have the knack to set things up individually, then you can code your way to add accordion menu to WordPress using hard coding. For this, you may require the knowledge of HTML, CSS and JavaScript to execute the process.
These are the steps to add accordion dropdown menu:
- Create a folder on your desktop and name it my-accordion.
- Open Notepad or any other text editor of your choice. Create a file called index-accordion.html and paste this code inside it for accordion HTML styling part.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width, initial-scale=1.e">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="accordion-styles.css">
</head>
<body>
<script src="accordion-app. js” type="text/javascript"></script>
</body>
</html>
This sets up the initialization of the content of adding the plugin.
3. In <body>, add this code
<div class="accordion-body">
<div class="accordion™>
<hl>Frequently Asked Questions</h1>
<hr>
<div class="container">
<div class="label">wWhat is WordPress</div>
<div class="content">WordPress is the simplest, most popular way to create your own website or blog.</div>
</div>
<hr>
<div class="container">
<div class="label" >What is Accordion?</div>
<div class="content">Accordion in WordPress is a style for displaying content in a vertically stacked list of headings .k/div>
</div>
This sets up the markup for the accordion dropdown menu.
4. Now its time to bring some more fluidness to the accordion menu. Let’s add some Accordion CSS styling under <head>.
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: @.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */.active, .container|: hover {
background-color: #ccc;
}
/* Style the accordion panel. Note: hidden by default */-panel {
padding: @ 18px;
background-color: white;
display: none;
overflow: hidden;
5.To make the accordion dropdown menu more functional, now we will add some touch of JavaScript on it. So Accordion JS will be our next step.
<script>
var acc = document.getElementsByClassName("container|
var i;
"3
for (i = @; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
3
}
</script>
3
6. For enhancing the accordion to be more dynamic, include the following code in the panel class: The max-height attribute has the following values: 0, overflow: hidden, and a transition.
<style>
-panel {
padding: @ 18px;
background-color: white;
max-height: @;
overflow: hidden;
transition: max-height @.2s ease-out;
}
</style>
7. Now, we will add icons like (+, -, <, > etc.) to the accordion menu.
/* Positions the plus sign 5px from the left. Centers it using the transform property. */
.accordion .label::after {
content: ‘+';
color: black;
position: absolute;
top: 50%;
right: -5px;
font-size: 3@px;
transform: translateY(-50%) ;
}
/* Hides the content (height: @), decreases font size, justifies text and adds transition */
-accordion .content {
position: relative;
background: white;
height: @;
font-size: 2@px;
text-align: justify;
width: 78@px;
overflow: hidden;
transition: @.5s;
}
/* Adds a horizontal line between the contents */
-accordion hr {
width: 100;
margin-left: @;
border: 1px solid grey;
This will add the sign (+) after the title of the accordion items.
/* Unhides the content part when active. Sets the height */
.accordion .container.active .content {
height: 15@px;
}
/* Changes from plus sign to negative sign once active */
-accordion .container.active .label::after| {
content: '-';
font-size: 3@px;
}
This will add the sign (-) to the accordion menu after the user expands the item.
8. Save the file my-accordion.
9. Open the WordPress admin file with the help of FTP client in the root directory and upload the file.
3. Page Builder
You can also create a website without writing a single line of code by using page builders. Every customization is as simple as dragging and dropping, and your front end will look fantastic. Suggestions include Beaver Builder, Divi, Elementor, and more.
In this instance, we'll employ Elementor Website Builder. To add an accordion button after installing the plugin, follow these instructions:
- Select the Elements tab and search for the Accordion widget.
- Drag the symbol to the home screen. The page will now have a default menu.
- Edit the Accordion#1 element that is listed in the Edit Accordion tab.
- Select the Content tab and change the title and description of the accordion button.
- Modify the accordion's width and border on the Style tab.
- In the Title subtab of the Style tab, change the background colour, active colour, and font for the accordion menu header.
- Repeat for the Icon and Content subtabs.
- Choose the Advanced tab and change the padding and margin of the accordion menu.
- Select Update to update the accordion dropdown menu.
P.S. - In their widget list, they all have toggles for accordions.
Best practices when using accordions
- Customer first - Check to see if the accordion enhances (or detracts from) the user experience.
- Theme Standardisation - Try to maintain your accordion styles from post to post. Your website could look unprofessional if they vary on each page. Reusable blocks in Gutenberg might help you maintain consistency in your styling.
- Mobile-friendly - Make sure your accordions can be used on small displays and look excellent. On mobile devices, make sure the content of the accordion isn't pushed off the screen or chopped off. On mobile devices, make sure the content of the accordion isn't pushed off the screen or chopped off.
- A little is better - A lot of older accordion plugins feature out-of-date settings (to put it nicely). With just a dash of colour to pop out on the page, simple designs are frequently the finest (or match your theme). Your accordion titles must not have bubble backgrounds or flashing text.
Conclusion
Nobody likes to search through lengthy pages of text to find the information they need. An alternate approach of organising content that makes it simple to identify subjects and elegantly condense a lot of data into a small area is the accordion menu. As we've seen, using accordions in a variety of ways can boost user engagement and provide customers more for their money. The purpose of accordions and the necessity for them on your website should be obvious, allowing you to select the best technique and plugin to make the most of the accordion menu. Visit HelpBot.net, where a team of developers will be pleased to help you, for additional information. To improve your WordPress website creation skills, you may also consult our informative blogs.
