PHPMatters Help You Better Hosting Your PHP-based Sites
How to Make WordPress Accordion Drop-Downs

How to Make WordPress Accordion Drop-Downs

Netizens purchasing online may encounter many accordion drop-downs frequently especially when they are choosing payment methods. Accordion drop-downs can be very powerful and do a lot of help to display pages.

On a page, with accordion drop-downs, your information can be better categorized and displayed for the targeted visitors who may not be interested in all details that certain sections are providing. In addition, with accordion drop-downs, the layout of your page would be more clear and concise so as to attract more visitors who grow up under fast food culture.

Accordion Drop-DownsHowever, not everyone is a professional and knows how to make WordPress accordion drop-downs. In the tutorial, we are going to introduce a quick and convenient approach – Accordion Shortcodes plugin. This plugin works by allowing adding two simple shortcodes to your page.

Besides, it can support item IDs or links. And you don’t have to trouble adding CSS. In a word, there are many powerful features available. You can explore them in a step by step manner. The procedure simple and easy to follow for adding accordion drop-downs.

Install Accordion Shortcodes

By default WordPress doesn’t include Accordion Shortcodes Plugin, but the WordPress plugin library is very powerful where you can install the plugin . First of all, you should log in your dashboard and go to “Plugins” on the menus. Then you need to click “Add New” and search for the plugin. After that, you are supposed to install the plugin and activate it.

Create Accordion Drop-Downs with Shortcodes

With Accordion Shortcodes plugin, you can add two shortcodes to save trouble: [accordion][/accordion] and [accordion-item title=””][/accordion-item]. When editing your page, you should go to the text where you want to insert the accordion drop-downs. Then, you need to copy the two shortcodes and paste them on that section where your drop-downs will be displayed.

Create Accordion Drop-Downs with ShortcodesIn the next step, you should edit the title of accordion items and the content of drop-downs. First of all, the title of the accordion item is the information you want to show in the outlined box. And the content of drop-downs is the information that is presented after someone clicking the box. To make it easy to understand, we have displayed the simple rules below which you can follow to edit your own title and content.

[accordion]
[accordion-item title=”Title for Accordion Item 1″]Paste the Drop-Down Content Here[/accordion-item]
[accordion-item title=”Title for Accordion Item 2″]Paste the Drop-Down Content Here[/accordion-item]
[accordion-item title=”Title for Accordion Item 3″]Paste the Drop-Down Content Here[/accordion-item]
[/accordion]

After editing the title and content, you may need to add more accordion drop-downs. Before adding, you need to know that the shortcodes displayed above must be complete and closed. So if you want to add more drop-downs, you should copy all of them. Do not miss any one serving as a closing tag. Otherwise, the content cannot be read by the system.

Below is a simple example without any special CSS style. Of course, you can customize the display as you like by editing the theme files.

Accordion Drop-Down Sample

Advanced Shortcode Settings

After creating the accordion drop-downs, you can do some advanced setting so that those drop-downs can be better displayed. For example, the first accordion drop-down can be open by default after defining openfirst=”true” in [accordion]. And those drop-downs can also be all open by adding openall=”true”. These two settings, as well as some other ones, are all available in the documentation of the plugin.

Conclusion

Actually, procedures shown in the tutorial are not tricky. Instead, what trouble is those shortcodes. But the documentation can help you out with detailed guides. After several practices, you can make your WordPress accordion drop-downs easily.