WordPress Content Accordion

Posted on by

I recently created a nice little content accordion plugin for WordPress while working on a clients project. It offers a pretty flexible solution for embedding multiple accordions within content areas. By allowing you to set multiple groups and insert accordions belonging to the same group in different parts of the content.

Download Plugin

Usage:

Simply surround whatever content you wish to include within the accordion with the shortcode [accordion]your content here[/accordion] and the plugin will do the rest.

accordion title

By default a link with the text “Expand Content” is added above the hidden content to expand/collapse it. To change this text add a title attribute to the shortcode like such [accordion title="Your Title Here" ]your content here[/accordion]

groups

Accordions can be grouped together by specifying a unique group name or number. By default all accordions are given a group that links all accordions of the same post or page together. So clicking on one should collapse the only open accordion content area of that page or post.

To assign your own group to an accordion add a group attribute and assign it something unique you will use with the others in the group.

[accordion title="I belond to group 1" group="group-1"]your content here[/accordion]
[accordion title="I'm special" group="special"]your content here[/accordion]
[accordion title="I belong to group 1 as well" group="group-1"]your content here[/accordion]
[accordion title="Your Title Here" ]your content here[/accordion]

The only two accordions that will be linked together are group-1, all others will independently unless more accordions are added without a group. In which case the last accordion listed would link with them.

Styling the Accordion:

I included some sample styles you can include in your theme to style the title and content area. At the moment no styles are provided by default to allow you to add/customize your own.

CSS Classes

The accordion title uses the .accordion-title class and the content is wrapped in a div with the class .accordion-content. When a title is clicked a class of .down is added to it.

  • Dansul586

    How do I get multiple content accordions on the one page?

    • http://patrick.forringer.com Patrick Forringer

      The post explains how to add groups to an accordion. By default all accordions on a page or post belong to the same group.

  • safak saracoglu

    thank – teşekkürler güzel paylaşım

  • KPD

    I’m struggling with how to implement your plugin.

    Do you have any more complete installation instructions anywhere and perhaps an example of the plugin in use.

    Thanks!

    • Patrick Forringer

      Extract the contents of the download into your wp-contents folder, then visit your plugins page in WordPress and activate the plugin. If you are still having trouble installing it please consult some online tutorials on the matter.

  • Rmhettinga

    Awesome Thanks so much!

  • http://www.pratikbagaria.com/ Pratik

    Nice and Simple. Love it!
    I am using this on a website with 25 accordions on one page. It works smoothly. Some of visitors have pointed out that when they scroll the page and click on an accordion which is on the upper part of the screen the accordion open from top. Which means they have to scroll back up to see the content. 

    Is there a way by which when the Title of the accordion is clients it will automatically be adjusted to the page. Sorry for my bad explanation. Can # tag or div tag play some role here?

    • Patrick Forringer

      I hadn’t tested it with large amounts of content inside the accordion, so I can see how that maybe an issue with the direction of it expanding. At the moment I don’t have much time to investigate, but you could try modifying the plugin and using a jQuery plugin called scrollTo to move the users view of the page to the right position when it finishes expanding.

      • http://www.pratikbagaria.com/ Pratik

        Thanks for the reply Patrick. 
        As suggested I will try using the scrollTo plugin. 

        For your reference here is the page I am talking about: http://nevatiasteel.com/chemical-composition-and-characteristics/

        • Digitalholli

          How did you manage to get the first one to stay open when you open the page?

        • Ross

          Yes I would really like to know this, please share if you can Pratik :)

        • http://theartfactory.in/ Pratik

           Sorry Digitalholli for such a late response.
          Here is my settings
          [accordions active=0 event="click" disabled=false autoheight=true]

          Hope this helps.

        • Ross

          Thank you Pratik, where should I add this? I tried adding it into the short code on the page i.e.

          [accordion title="Front Office" active=0 event="click" disabled=false autoheight=true ]content[/accordian]

          But it didn’t work, sorry if its a silly question, I cant see where to add this.

          Thanks

        • Patrick Forringer

          It appears he us using another plugin currently. Which is why those parameters don’t work. As I’ve never added them!

  • Nate Del

    Thanks got the great plugin! I was curious if it is possible to have other shortcodes inside the content work? 
    any help would be much appreciated!

    • Nate Del

       i am going to take a breathe and try that again.
      Thanks for the great plugin! I was curious if it is possible to have other shortcodes work within the accordion container? at is present it seems that any shortcodes i add just show up as text, is there anything i can change to have it recognize them?
      Thanks again, Nathan

      • http://patrick.forringer.com Patrick Forringer

        Heh, I understood you the first time. Sadly It looks like this is hard to implement within WordPress. I can only suggest goggling for a possible solution.
        – Patrick Forringer

        • nate del

          Will do thanks for the reply, and great plugin thus far!

  • Russ

    Hi, this IS very simple to use. How can I add styles to my accordian though? I got it working, but wanted to BOLD headings, and try some things. thanks

    • http://patrick.forringer.com Patrick Forringer

       There is a section on this page at the bottom for styling the accordion. You will have to use CSS to target the headers and content area if you want to style them. If you are talking about content within the accordion, you can do that within the wordpress editor.

  • Bill

     I installed the plugin, and it works if i have one accordion specified. If i add more accordions (like your group example) it just displays them all at once (without drop down capability). Whats up with that?

    • http://patrick.forringer.com Patrick Forringer

      Are you adding closing short codes? If you could paste your content with most of the inner content removed I may be able to see whats up.

      • Bill

         This is what I pasted into the HTML portion of the editor on WP. 

        [accordion title="I belond to group 1" group="group-1"]your content here[/accordion]
        [accordion title="I'm special" group="special"]your content here[/accordion]
        [accordion title="I belong to group 1 as well" group="group-1"]your content here[/accordion]
        [accordion title="Your Title Here" ]your content here[/accordion]

        Here is the site with how it shows up. http://webdesign.gs/hammittbenefits/employer-products/

        • http://patrick.forringer.com Patrick Forringer

          It looks like the title of the first accordion title is being wrapped in a p. Not entirely sure how that is happening, try putting a space about the first accordion in the editor. The error is occurring in the javascript due to the title not being able to find the content area below it. ( as its inside a p tag )

        • Bill

           I had to put a hard return in between each section of shortcode so that there was a space between each one in the editor. Weird. But its working now. Thanks Patrick!

  • Bill

    Do you provide a way to make the first accordion area open on page load?

    • http://patrick.forringer.com Patrick Forringer

      Bill, you should be able to do that with jQuery very easily. Select the first title in the accordion and then use .click() on it.

  • Laptophobo

    This sounds like what I’ve been looking for to place various content on a single page/post and have it display via an accordion.  Are there any live example you could share with me?

    Thank you.

  • nono_webdesign

    Hi thanks for the plug :)

    I’m using it in my widdget (with the widget “text”)
    And I wish replace my title by images using “span” in css, how can i do this ?
    title 1 -> image 1
    title 2-> image2….

  • Miqdad Ali

    Hi,

    I have downloaded this plugin and copied to my plugins folder, but it doesn’t showing in my plugins listing page, can you please advice 

  • http://www.facebook.com/profile.php?id=1769251368 Ron Limto Rivero

    It displays wonderfull ing Mozilla Firfox, but in Chrome, it just displays the content.. How’s that?

  • http://www.facebook.com/LivinFly1189 Karna Gandhi

    Hi Patrick, This is very generous of you to do, I am using it on my page and it looks so clean. I’m just having trouble with getting the accordion to stay closed I’m kinda new to using shortcodes… what attribute would i need to add to have them stay closed when the page loads? Thanks In advance, and for a great share

    • http://patrick.forringer.com Patrick Forringer

      Would you be able to send a link to the page it’s used on? I believe you would have to alter the default styles of the accordion content to be collapsed, or you could trigger the accordions yourself with jQuery.

  • rtown

    This plugin is really great and worked like a charm after many other solutions failed. Is there any way to have a group of accordions on the same page all expand at the same time when any of them are clicked?