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.
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.
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.
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.
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 :)
Very nice, i think i will use this plugin, in my FAQ Sction =)
So i´ll say big Thank You
Awesome :) Glad to hear you have a page in mind for it.
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. “
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.
Hi guys!
This is a great addon. Very useful, modern and necessary.
Thanks a lot for your great job!
Thanks Jean :)
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
Thanks for your support Dibyendu, it’s most appreciated.
More and more i will have less reason to install additional plugins as the widget bundle just keeps getting better. Great job Siteorigin.
Thanks Louis, more to come quite soon. Cheers :)
I have wanted this for so long! Thanking you :)
Regards,
Thanks Fuad, glad we could finally get it done :)
Thank you wery good with a Accordion Widget.
Thanks Benny, appreciate the support :)
No 14 Owo Avenue
Ijapo Housing Estate
Look forward to this new addon
Thanks Biola, I’m sure you’ll find it useful :)
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?
Hi Dante. The Accordion addon in SiteOrigin Premium offers the ability to set a title icon as well as the open close icon.
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!
That’s awesome :) Really appreciate the support. Lots of powerful new features on the way soon.
One more reason to recommend SiteOrigin to friends and customers. It’s looking good, guys! :-)
Thanks Jes, appreciate the support.
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_
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.
That’s great. I needed this kind of widget for websites I design. Thanks for this gorgeous update!
Super :) Glad you can put it to work right away.
Just Try the new widgets …. well done, that is helpful & just apply to my new website for handle documents.
Thanks Holmes. Glad to hear you’re finding them useful.
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!
Hi Mónica. Sorry for the delay in replying. Glad to hear you’ve been finding our plugins useful. All the best :)
Is there any way to make columns where the texts go or is that a premium feature possibly? `
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.
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.
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.
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!
Sorry, not that I know of. That isn’t ideal. I’ll log a bug report for this. Thanks for the feedback.
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?
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 :)
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?
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.
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
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?
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.
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.
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.
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.
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.
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.
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.
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.
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??
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.
Hello, thanks for the reply..
but i dont find such option.
i find only three option like Title, Panels & Design.
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.
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.
Hi Tracy, thanks for your replies :)
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.
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.