Home>Blog>Introducing the Accordion Widget

Introducing the Accordion Widget

Accordions are a great way to organise your pages. Whether you’re creating a frequently asked question page, a services page or just a general information page – accordions help you fit a lot of information into a small amount of space.

In the Widgets Bundle 1.10.0 update, we’re introducing a brand new, powerful Accordion Widget. Allowing you to add accordions to your Page Builder pages or the many other page builder plugins that the Widgets Bundle supports.

The default accordion style.

As always, this is a completely free addon. All you need to do is update your copy of Widgets Bundle, then navigate to PluginsSiteOrigin Widgets in your WordPress admin and activate the accordion widget.

It’s definitely worth checking out this new widget. We’ve posted some Accordion Widget documentation to help you get started.

Something Extra for Premium Users

Of course, we’re always looking for ways to make things even better for our SiteOrigin Premium users. We’re also giving all our Premium users access to an advanced accordion addon that adds a whole bunch of extra features.

The free Accordion widget lets you add standard TinyMCE text content, but in the premium addon, we’re giving you the power to create accordion content using a layout field. This means you can fill your accordions with complex widgets and Page Builder style layouts.

Create content using a layout builder

Our design team also worked hard on creating a set of visual customization settings for your widgets that allow you to create a huge number of different designs. As an added bonus, next week we’ll be releasing another update that includes some beautifully designed presets.

Some of the design variations possible with SiteOrigin Premium

If you aren’t a SiteOrigin Premium member yet, be sure to sign up. It’s a cost-effective way to build your sites faster and more professionally. We’re introducing more addons all the time, so the longer you’re a member, the more valuable it becomes.

A demo of the above designs is available here.

Leave a Reply

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

Comments

  1. 6 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for reading. If you have any questions or feedback, please, let us know here in the comments. We look forward to hearing from you :)

  2. 6 years, 5 months ago Maze Sire

    Very nice, i think i will use this plugin, in my FAQ Sction =)
    So i´ll say big Thank You

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      Awesome :) Glad to hear you have a page in mind for it.

  3. 6 years, 5 months ago Vijai Vir Singh

    Not free is it ? Live with the Livemesh conflict for now.

    Fact of the matter is the matter is that WP org, has little valve for Matt Mullenweg and Automattic.

    You are encouraged to move to WP com ?

    WP is loosing major space to Squarespace and Wix and Weebly [ WP Com pricing is almost the same as the aforementioned platforms.

    My 82 domains are wishing Goodbye to WP Org and Siteorign . Till the migration , I will “Live with the Livemesh conflict for now. “

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      Hi Vijai, thanks for reaching out and for your feedback. It’s a free widget, part of SiteOrigin Widgets Bundle which is on the wordpress.org plugin repo. Additional functionality is added by our SiteOrigin Premium plugin.

  4. 6 years, 5 months ago Jean Laurent

    Hi guys!
    This is a great addon. Very useful, modern and necessary.
    Thanks a lot for your great job!

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      Thanks Jean :)

  5. 6 years, 5 months ago Dibyendu Roy

    that is a REAL GOOD NEWS. I am using your page builder since a while and its free version is more than enough. Now you added another diamond on that CROWN.
    Thanks

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      Thanks for your support Dibyendu, it’s most appreciated.

  6. 6 years, 5 months ago Louis Sanjoh Kala

    More and more i will have less reason to install additional plugins as the widget bundle just keeps getting better. Great job Siteorigin.

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      Thanks Louis, more to come quite soon. Cheers :)

  7. 6 years, 5 months ago Fuad Abdi

    I have wanted this for so long! Thanking you :)

    Regards,

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      Thanks Fuad, glad we could finally get it done :)

  8. 6 years, 5 months ago Anonymous

    Thank you wery good with a Accordion Widget.

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      Thanks Benny, appreciate the support :)

  9. 6 years, 5 months ago Biola Olatunde

    No 14 Owo Avenue
    Ijapo Housing Estate
    Look forward to this new addon

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      Thanks Biola, I’m sure you’ll find it useful :)

  10. 6 years, 5 months ago Dante Hamilton

    Hi, haven’t checked this one out yet but I am curious if it can be used as an “Agenda” and if you can add icons such as the Font Awesome Calendar or Clock to the Title area?

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      Hi Dante. The Accordion addon in SiteOrigin Premium offers the ability to set a title icon as well as the open close icon.

  11. 6 years, 5 months ago jbularz1

    Just renewed my premium access for year 2. You guys stand out with your great customer service and follow-up. Keep bringing on the good stuff!

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      That’s awesome :) Really appreciate the support. Lots of powerful new features on the way soon.

  12. 6 years, 5 months ago Jes Thorbjørn Holt

    One more reason to recommend SiteOrigin to friends and customers. It’s looking good, guys! :-)

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      Thanks Jes, appreciate the support.

  13. 6 years, 5 months ago Ricardo Penders

    Another great feature from SiteOrigin, and since I’m a long time premium user I do feel a bit special that we get a little bit more.

    I’m always looking for new things I can use on my blog so it doesn’t take me very long to come up with a couple ideas I’m gonna be
    testing out in the near future.

    And I didn’t even use all the other good stuff my favorite thing by far are the new animated elements that we can make, I’ve gone full out with those animated elements. So when you scroll down on my site you’ll see all the elements becoming visual and all the widgets and stuff I made it all animated. Didn’t even slow down my website, that’s the best part of it.

    Now I’ve set my eyes on the new Parallax feature but I still have to figure out how I get it to work, I thought it was easier to use by just importing a picture of any size and the software would figure out how to show it properly but that didn’t workout for me.

    I would be helped a lot if I just knew what the ideal dimensions would be to use as a background for parallax effects or maybe get some example pictures that I can test so if someone can help me with this that would be great.

    Best regards,
    Ricardo Penders CEO
    _SoHarD_dB_w@®Ez_

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      Hi Ricardo, thanks for your ongoing support, it’s most appreciated. If possible, please, reach out to us via email on [email protected]. I’m sure Alex can help you with the Parallax questions you currently have open.

  14. 6 years, 5 months ago Chiara Vianello

    That’s great. I needed this kind of widget for websites I design. Thanks for this gorgeous update!

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      Super :) Glad you can put it to work right away.

  15. 6 years, 5 months ago Holmes Cheung

    Just Try the new widgets …. well done, that is helpful & just apply to my new website for handle documents.

    • 6 years, 5 months ago Andrew Misplon
      Hi, I Work Here

      Thanks Holmes. Glad to hear you’re finding them useful.

  16. 6 years, 5 months ago Mónica

    Thanks! I´m a designer from Chile and you have help me on web. Thanks to you it´s easy for me
    Thanks thanks thanks!

    • 6 years, 4 months ago Andrew Misplon
      Hi, I Work Here

      Hi Mónica. Sorry for the delay in replying. Glad to hear you’ve been finding our plugins useful. All the best :)

  17. 6 years, 5 months ago dara

    Is there any way to make columns where the texts go or is that a premium feature possibly? `

    • 6 years, 4 months ago Andrew Misplon
      Hi, I Work Here

      Hi dara, sorry for the big delay here, I had an issue with notifications. Unfortunately, the Layout Builder field is only included in the premium addon. Sorry I don’t have better news.

  18. 6 years, 4 months ago kalyan

    Hi,

    Siteorign restores my front-end development time into half. We are in very need the module or row copying option. Also, it will good to have a shortcode for each section.
    Ex. I have a “we will help you” section in all my 10 pages, if I need to change a mail id in this section then I need to work on each individual page. Let me know if this feature is already existing. I’m not sure this is the right place to post this comment. Kindly excuse.

    • 6 years, 4 months ago Alex S
      Hi, I Work Here

      Hi Kalyan,

      Have you tried the SiteOrigin Copy and paste functionality yet? Post: Page Builder Copy Paste

      Unfortunately, the shortcode section concept you’ve described isn’t currently possible. I’ll log that as a feature request.

  19. 6 years, 3 months ago Cameron Smith

    Thanks for the great widget! Have started using it in my site, and I have a question. Is there a way to remove the Title element entirely? Even when I leave the title entry blank, a couple rectangles appear where it should go on the page. Thanks!

    • 6 years, 3 months ago Andrew Misplon
      Hi, I Work Here

      Sorry, not that I know of. That isn’t ideal. I’ll log a bug report for this. Thanks for the feedback.

  20. 6 years, 1 month ago Simone

    Hi there, I’ve been using the widget for a couple of months already but I can’t find the ability to choose the accordion to act as an accordion like example 1 of the Demo or as a doddle like example 2 of demo. For me they stay open until I close (like the example 2), they don’t close if I click on the next or previous accordion title. How/Where do I change that?

    • 6 years, 1 month ago Andrew Misplon
      Hi, I Work Here

      Hi Simone.

      Each Panel in your widget has a setting called Open State. In the demo, all the panels are set to closed except for the first one which has an open state set to Open.

      If that doesn’t help, please, open a thread on our forum and let me know once that’s done and we’ll assist further there.

      https://siteorigin.com/thread.

      Thanks :)

  21. 6 years, 6 days ago Tracy

    Hi, THis is a really great widget, but would like to be able to combine it with a “read more” function – is this possible? – I’ve tried adding it to the panel, but it doesn’t seem to work?

    • 6 years, 5 days ago Andrew Misplon
      Hi, I Work Here

      Hi Tracy

      Thanks for reaching out.

      The WordPress read more quicktag is specifically designed for posts on archive pages. If you’re looking for show/hide functionality, I recommend trying: https://wordpress.org/plugins/wp-showhide/ or perhaps https://wordpress.org/plugins/show-hidecollapse-expand/. Unfortunately, the Accordion and Tab widgets require a Layout Builder content field selection in order to display shortcodes so this workaround isn’t currently possible in the free version.

  22. 5 years, 11 months ago John Martin

    Thank you, Greg and your team for the great accordion widget. I am having a problem which I hope you can solve.
    After editing and saving (update) extra line spaces are added to the text where there is a paragraph return. See “February” at http://nswvisitorguide.com.au/orange-travel-guide/orange-region-events/
    Thanks
    John

    • 5 years, 11 months ago Andrew Misplon
      Hi, I Work Here

      Hi John

      Sorry for the hassle. We’ll have this fixed ASAP. I think this is the related issue: https://github.com/siteorigin/so-widgets-bundle/issues/682.

      You can perhaps try to remove the
      tags in the Text tab and then switch to Visual and save. Any difference?

  23. 5 years, 11 months ago John Martin

    Hello Andrew,

    Thank you for your helpful response.

    However, I am sorry to say the spacing problem has not been solved. This is what I have done.

    The page in question is:
    http://nswvisitorguide.com.au/orange-travel-guide/orange-region-events/

    1. In the second accordion panel (January) I did as you suggested and removed spaces in the text mode. (There were no visible tags just blank spaces) *See screenshot 1 attached*
    2. I checked the result in visual and saved/published the page. *See screenshot 2 attached*
    3. I reviewed in my browser (Chrome) and all was OK.

    Yippee – well not really….

    I then repeated the process with the next panel down (February) and in the browser, all OK for that panel *BUT*
    the panel above, January, that was previously OK had *reverted back to the extra spaces*. *See screenshot 3*

    I hope this helps.

    • 5 years, 11 months ago Andrew Misplon
      Hi, I Work Here

      Thanks for the feedback and for trying, appreciate it. We’ve stopped our normal development schedule to focus on the editor field bugs. We’ll push an update for the Widgets Bundle as soon as we’ve made progress. I can’t say when this week it’ll be. Please, keep an eye out at Dashboard > Updates. Once the update has been released, please retry and let us know how it goes. Sorry for the hassle.

  24. 5 years, 11 months ago John Martin

    Hello Andrew,
    Thank you.
    Hope you are able to solve the editor field bugs as quickly as you wish.
    I look forward to the updated accordion when it's available.

    *Product Feature Suggestion*
    It would be very helpful to be able to save a widget to a clipboard for reuse. I use "copy widget" and paste widget" a lot and it would be great to have a library of predesigned widgets. Maybe this could be included in the work to enable widgets to be copied to another site that Greg mentioned as a future feature.

    • 5 years, 11 months ago Andrew Misplon
      Hi, I Work Here

      Thanks for the suggestion. At the moment the only workaround I can think of would be to create a page to use as your template storage location and develop your base widget layouts there.

      For more content focussed sites we do have a Custom Post Type Builder in SiteOrigin Premium that has the ability to create Page Builder based templates, not what you’re after but sort of related.

  25. 5 years, 4 months ago Kay

    I’d really love this if I could put Siteorgin widgets in a panel – widget within a widget.
    For example, if I wanted to put a image grid widget in one panel, then a price table widget in another panel, etc.

    • 5 years, 4 months ago Andrew Misplon
      Hi, I Work Here

      Hi Kay, thanks for reaching out :) Unfortunately, this is only possible in a few situations. The Layout Slider widget, for example, has a Layout Builder in each frame of the slider so you can insert widgets in the widget. This isn’t possible in the Image Grid. If you’re using SiteOrigin Premium you can use a Layout Builder in each frame within the Accordion widget which allows you to insert widgets in the widget.

  26. 5 years, 1 month ago meldiva

    Out of interest, is there a way to create a page where the accordions are all fully expanded by default, and then the user can select to compress the info into skimmable section headers? I only ask, as it is better for SEO purposes to display all your keyword rich content. Although Google can see whats in an accordion they weight the content within hidden sections as less important, and therefore are less likely to rank those keywords.

    • 5 years, 1 month ago Andrew Misplon
      Hi, I Work Here

      Hi meldiva :) You could set each accordion frame to Open. The setting name is “Initial State”. By default, it’s set to Closed but you can change it to Open. Users would need to close the accordion panels one by one though. Hope that helps.

  27. 3 years, 11 months ago L R Wani

    i have a question regarding the same widget, that when click on first item, open the same item panel & rest items are closed. but when we click on second or third or else item then first panel is also open.

    i want, in this feature when we click on any item only the panel of same item is opened & remaining are closed.

    please reply how should i do??

    • 3 years, 11 months ago Tracy Palazzo-Barnes

      Hi L R Wani – When you set up the accordion there are many options the first four are: Presets;Title;Panels;Maximum number of simultaneous open panels.
      Scroll to :- Maximum number of simultaneous open panels and input 1 – when users click on a panel only one will show, if they already have an open panel and open a second one, the previous panel will close and the second one will open.
      I LOVE this widget and use it a lot, hope this helps.

      • 3 years, 11 months ago L R Wani

        Hello, thanks for the reply..

        but i dont find such option.
        i find only three option like Title, Panels & Design.

    • 3 years, 11 months ago Andrew Misplon
      Hi, I Work Here

      Hi L, thanks for reaching out.

      The SiteOrigin Premium Accordion addon includes a setting labelled “Maximum number of simultaneous open panels”. This setting is required to set a limit of one panel open at a time.

      “For example, if you only want users to be able to open one panel at a time, forcing closed all other open panels, enter 1. If you don’t want to restrict the number of open panels you can leave this field blank.”

      Page: Accordion

      It isn’t currently possible to set an open panel limit without the SiteOrigin Premium Accordion addon. To find out more about the settings included in this addon, please see Page: Accordion.

  28. 3 years, 11 months ago Tracy Palazzo-Barnes

    Hi – apologies – this is what my accordion looks like – if yours is missing this setting you might want to get Site Origin Email help, I've always found them very helpful.

    • 3 years, 11 months ago Andrew Misplon
      Hi, I Work Here

      Hi Tracy, thanks for your replies :)

  29. 7 months, 29 days ago Shaundrea

    How do I hide the chevron icon when using the accordion? The icon displays far away from the title, I prefer to remove it all together.

    • 7 months, 28 days ago Andrew Misplon
      Hi, I Work Here

      Hi, thanks for posting your question. SiteOrigin Premium offers the Accordion Addon to set a custom icon. To hide the icon you can try the Custom CSS rule provided here Page: Accordion. The rule can be added to AppearanceCustom CSS if you’re using SiteOrigin CSS or CustomizeAdditional CSS if not.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More