medk medk - 11 months ago 69
jQuery Question

jQuery UI Accordion Control

I have a jQuery UI Accordion, where a number of checkboxes in each accordion section.

1- I want the accordion to start all collapsed, and all enabled.

2- When the user clicks on any checkbox, the accordion becomes disabled so the user can continue to check only the checkboxes within that group.

No, what's the name of the option to add to start all collapsed? My script is like:

$(function() {
$("#accordion" ).accordion({
heightStyle: "content",
animate: 1,
collapsible: true

And what's the action to trigger to make the accordion disabled?

$(document).on('change', '.checkbox', function(event) {
var check = $(this);
var len = $('.checkbox:checked').length;
if (':checked')) {
} else {
if (len == 0) {

Answer Source

For the first question, you have a ready-made answer:

$("#accordion" ).accordion({
    collapsible: true,
    active: false

Collapsible means that you can collapse the panel with the current focus, and setting active to false means that none are active.

While it's possible to work with the CSS opacity attribute, the simpler way to do it is to add the appropriate class to the item. You can disable the entire accordion by setting the disabled option to true, but you only want to disable the panels that you aren't in. To disable a single panel:

$('#accordion #myH3').addClass('ui-state-disabled');

where myH3 is the id of the particular H3 header element you want to disable. I'll leave you to work out the logic of determining which elements aren't the currently active one.

By the way, the ui-state-disabled class reduces the opacity of the element to .35. Also, if you have things like buttons in your header panel, keep in mind that they will not be disabled if you disable the header. And, if you specifically disable them, their opacity will be reduced by .35*.35, or to .1225 which is very faint. If you want to keep the opacity of contained items consistent with the container when you disable the container, add a class to the contained items and use CSS to set the opacity to 1.