So I found that section-widget-tabbed.php around lines 35-60 has some code for outputting the html content.
I managed to re-write this so that it matches the example on the jQuery UI Accordion page (h3 heading + div content).
Unfortunately I haven’t found how to make the javascript work on the new html, though.
I looked at section-widget.js, which is quite short. I tried changing $(‘.swt-wrapper’).tabs() to $(‘.swt-wrapper’).accordion({ header: ‘h3’ }) but it doesn’t work.
Any help with this next step would be amazing. Thanks!
Hi apatheticresistance,
It’s funny how my co-worker suggested me to implement the same thing a couple of days ago, so you might see that comes built-in in future versions 😉
But you are on the right track though, all you need is add the relavent CSS. I would suggest you to disable the build in styling (choose “bring my own stylesheet”), then download the accordion CSS from jqueryui.com
Good luck!
Godfrey
Hi Godfrey,
Yes, it would definitely be great to see other formats in the next Section Widget.
Just to share with anyone interested, I figured out what was missing from the equation. I did indeed download the Accordion CSS, and added that into the mix. I used the jQuery UI Themeroller, which is awesome.
But there was actually another step I think I needed to do. I think that your plugin only includes the jQuery for tabs, and so I had to be sure to include the full jQuery UI library in my templates, or at least the accordion javascript.
I added this to my <head>, before wp_head() is called: wp_enqueue_script(‘jquery-ui-core’);
And it works!
