How to add Jquery based Accordion slides to WordPress

You must have seen stacks of Animated slides, which open and close as you click on one edge of the slide or when you click on the title of the slide which of course is visible from one edge of the slide. These Set of slides are called as Accordion slides, name which has been given based upon the Accordion Musical instrument, which also opens and close and produces music. 

Now lets see to achieve the above type of display what is involved, how to easily produce the jquery accordion slides using wordpress plugin. So the plugin that you need to install to produce accordion slide is  here is the link of the plugin on the wordpress plugin repository Best Accordion wordpress plugin . After you install the wordpress plugin, you will see find a link by the name of Accordion Shortcode appears on the wordpress vertical admin menu, which further has three options

a) All Accordion b) Add New Accordion 3) More Free plugins

Now to add an Accordion, click on the option that says Add New Accordion which means that we will be adding a complete Accordion system containing multiple Accordion Slides. Following are the options that open when you click on Add New Accordion.

  1. Add title by which the whole accordion slides will be identified
  2. There will be multiple small small edit areas for each accordion slide in which you can content and title and also select the icon that appears next to title for free set of icons, you can add images and videos inside the content similar to the way you add in a post of page, you are also given the option to use rich text editor to put in formating.
  3. There will be Red add new button which will allow you to add more slides to the accordion that you are currently editing.
  4. Now there are lot of configuration options on the right hand side where you can change the colors of the accordion as well pickup things like if the title of the accordion will show or not.
  5. And ofcourse there are some functions that are available in the premium version.

If you are done with the New Accordion you can click on publish on the right top or if you still editing the Accordion you can click on save draft to save the current status of editing.

Now after you have published this Accordion that doesn’t mean that this accordion has started showing, what this means is that you can now insert the Accordion short code into any page or post you like. So insert the Accordion Code just click on the Accordion tool icon that appears in the editor window of Page/Post. The select the Accordion Title that you want to insert. 

And Now when you publish the page you can see your accordion in action.

This Accordion plugin also works in the Widget Area what that means is that you can display the Accordion in the widget areas using the widget.

Just Drag the Widget for this Accordion into the widget area, it could be sidebar, footer or layout builder and then select the accordion that you want to display there, decide the title that you would like to display on the accordion in the widget area and save.

Here is how the same Accordion looks on sidebar, Since this is also responsive Accordion plugin Everything has adjusted to the small width sidebar.

Of course if you are creating an Accordion for the widget area, you can keep the titles of less length to make them display better.


How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

(Visited 115 times, 1 visits today)

More from my site


Posted by deepak.kapoor

An Active Youtuber, Blogger, Traveller, Programmer, Wordpress developer. Likes to spend his free time Motorcycling through the hills.

Leave a Reply

Your email address will not be published. Required fields are marked *