How To Add Simple Accordion On WordPress Post and pages

accordion-WordPress-website

WordPress has many plugins, but sometimes it is very difficult to find what you Exactly want. This is what happens to me I was looking for a Simple WordPress droop-down Accordion which I could add to my WordPress post without switching to any tabs or any page. Follow the post to add simple accordion on WordPress post and page.

After searching for hours Here is the Simplest WordPress Drop-down Accordion I got. But wait, This WordPress WordPress droop-down Accordion was not the Exact match what I wanted so I decided to make this plugin Perfect fit for my website. After some modification in CSS file, I was able to achieve the result below.

How to add simple accordion on WordPress post and page.

Install this plugin and Activate.

Now Create a new post and on top, you will Find two new Option in the toolbar.

Click on Add an Accordion group Choose and click on Click to close Accordion and choose the tag and press OK.

add simple accordion WordPress post and page 

Now Click on add an accordions item and enter the title and click on OK.

The Final Code Should look like this add droop down accordion on WordPress post and pages 2

Now if you Preview your post You Will Find an Ugly Droop-Down Accordion probably No one wants that on their Website post.

So, Its time to add some CSS and make this Droop-Down Accordion from ZERO to HERO.

To add CSS click on Appearance and Click on Edit CSS.

add droop down accordion on WordPress post and pages 1

Now in the Box add Some Codes:

.accordion-title{
background-color: #47494cbd;color: azure;padding: 7px;margin:0px;
}
.accordion-content{
display: block;padding: 10px;
background-color: rgb(239, 244, 252);
}

This is to change the color of the title bar and This one is to change the background color of Accordion content. You can Experiment any Color and Style you Want For the Accordion.  

Here you have got a Simple yet power Droop-Down accordion on your WordPress Website.

Leave a Comment