Accordion Checkbox Element Submission

[GoogleCodeExporter]

This is an implementation of the Checkbox using jQuery to enrich it a little 
bit.

Basically I wanted to use a checkbox multiselect control but did NOT want the 
whole list shown (the list of employees in my application is hundreds of names 
long and not really good for display in a listbox or straight up list of 
checkboxes)

Originally I was going to build an entirely custom interface for this one 
application but as I looked at it I realized that there would be more than one 
situation this might come in handy and that lead me to try to create a new 
Element type.

The Element_AccordionCheckbox displays the currently selected values in a plain 
list. 
When you click the "Select" button, the list changes to the standard checkbox 
element style from which you may pick one or more entries.
When you then click "Done" the list is once again reduced to only the items 
which have been selected.

Again, this is a rough, "first draft" implementation and there is LOTS of room 
for improvement. But please give it a look and let me know what you think of 
the idea.

Original issue reported on code.google.com by broum...@gmail.com on 27 Jan 2012 at 8:52

Attachments:

• AccordionCheckbox.php

[GoogleCodeExporter]

I realized that this might be a better post if I included screen shots, so here 
are a couple of the widget in both its states;

Original comment by broum...@gmail.com on 27 Jan 2012 at 9:41

Attachments:

• screen1.jpg
• screen2.jpg

[GoogleCodeExporter]

Thanks again for submitting your code, Chris.  I've also run into the same 
issue you brought up when working with a long list of checkboxes.  It's 
annoying from a user's standpoint to have to scroll and scroll to search for 
the options that are selected.

I really like the solution that you posted here - AccordionCheckbox.  Here's 
some constructive criticism for you to consider.  My hope is that you will 
continue to fine tune this new concrete element class and take it from a "first 
draft" to a polished, robust solution that's ready for production.

1.  Instead of extending the OptionElement class, why not take it a step 
further and extend the Checkbox class?  This way, you'll retain the existing 
functionality of how checkboxes are look and behave in the project (borders, 
clickable labels, etc).

2.  If the element does have any values set, it's a bit confusing for a user to 
know what to do currently.  If there are no values, I would either just display 
the checkboxes or provide a some kind of message/link that clearly tells the 
user there are options that they can select from.

3.  When you click the "Select" button, it would be ideal if the checkbox 
section only expanded as much as it needed to.  I tested with only three 
options and there was a large amount of white space below the checkboxes.

Original comment by ajporterfield@gmail.com on 28 Jan 2012 at 6:59