[Plugin: jQuery UI Widgets] ACCORDIAN DOES NOT WORK

Hi.
Could you share a link to your site? I’d like to see what is going on and if jQuery UI is loading properly.
Cheers!

Hi,
Might be able to help here.

Change
<div id=”accordion”>
to
<div class=”accordion”>

Cheers!

Also,
I wanted the accordion panels to keep their own height, which is not the default functionality. By default all panels take the height of the tallest panel. That’s a jQueryUI thing, and no fault of this plugin.

To get this you need set the autoheight to false.
Change:
$default_accordion_init = “\r\n$( \”.accordion\” ).accordion();\r\n”;
to this:
$default_accordion_init = “\r\n$( \”.accordion\” ).accordion({autoHeight: false, navigation: true, collapsible: true });\r\n”;
in the file:
jquery-ui-widgets/jquery-ui-widgets.php

This file is accessed via the edit button for that plugin in the installed plugins list on your dashboard.

These extra options also turn on “navigation” and “collapsible” functions. “Navigation” could be very useful by allowing anchor tags within a panel (or its heading) to be accessed from external links with the panel automatically opening.

“Collapsible” allows panels to be closed without the next panel opening, that is you can close all the panels. I find this useful in that the panels then look more like a table of contents, and the reader can see what all the panels are. In my content, the reader might need to go directly to, say, the third panel.

The first panel still opens on page load, which I would prefer didn’t happen, but at least you can close it.

Explanations here:
https://jqueryui.com/demos/accordion/#no-auto-height
and:
https://jqueryui.com/demos/accordion/#collapsible

Other options are available which I didn’t play with.

Nice plugin!

Cheers,
Mike Smith

This might also be useful to you.

My template/CSS settings slightly broke the default appearance of this widget so I modified the CSS a bit, in order to get the vertical spacing and border appearance I wanted. I found the arrows were under the Headings, so I had to bump the headings over to the right with padding of 30px. I also needed to pad top by 4px and bottom by 2px in the headers as well. Finally I had an open margin between the header and its panel, which I closed up with a negative margin-top on the panel.

I kept borders all around because I prefer this, but perhaps I’ll make a dotted border between the header and its panel.

The “.custom” selector is there because I use the WordPress Thesis Framework.

Use the selector “div.accordion .ui-accordion-header” as is. Don’t add the H2 H3 etc tags to it, because you want it to work regardless of which header tag you end up using to mark the accordion headings. On some pages I use H2, and on others I use H3.

.custom div.accordion .ui-accordion-header {
padding: 4px 0px 2px 30px;
border: 1px solid #FFBC73;
}

.custom div.accordion div.ui-accordion-content {
border: 1px solid #FFBC73;
margin-top: -13px;
margin-bottom: 13px;
}

Also, take care not to overlap with other range-based shortcodes from other plugins on your page. For example, I use conditional shortcodes from s2member to control what is displayed according to their login role. This could easily go wrong (i.e. break the page, display wrong content) if I overlapped those shortcodes with these accordion divs.

Cheers,
Mike

Thanks for answering Mike.

To reiterate. This Plugin simply exposes the jQuery UI library on the front end of your site. All you need to do is add the correct jQuery UI html on your posts and pages and it will work without errors if you use the right html element selector, and valid jQuery code etc.