Collapsible set (accordion): Cleanup #1899

toddparker opened this Issue Jun 22, 2011 · 8 comments


None yet

6 participants


The collapsible set needs some visual and functional cleanup:

  • All sections are collapsed by default (which is fine) but there isn't any way to set one as open. The data-collapsed="false" attribute doesn't seem to affect anything. This is a bug.
  • The last item doesn't get the rounded corners - #1751
  • We need to add a background gradient to the body of each section so they are visually connected. By default the body of each section should match the theme of their parent header (these are individually themable) but if the data-role is specified on the wrapper for the section content, that should be respected. So if the parent header doesn't have a theme specified, both the heading and body will get swatch C (ui-bar-c and ui-body-c respectively). If data-theme is set to A on the heading, the body will also be A. If the data-theme is then set to B on the body wrapper in this example, the header will be A and the body B.
@scottjehl scottjehl was assigned Jun 22, 2011

one thing that we have noticed (along with the last item not having rounded corners on the bottom) is that when the first item is collapsed, the bottom corners are rounded.

You can see the it in the Demo site (scroll to the bottom where collapsible-set example is and collapse the first item)

alumni commented Jul 19, 2011

Also, the +/- button always has the D theme no matter what the collapsible theme is. I think it should be inherited, or at least an option to change it should be provided.

Later Edit: Maybe 'click to collapse contents' could also be removed. I don't know why is this useful, but I wouldn't want to have this text if the application is not in English.


The icon always has a border around it as well - the cropping of the icon image doesn't come as close to the icon as in all the other button icons in jQuery Mobile.

@gseguin gseguin was assigned Sep 6, 2011
gseguin commented Sep 8, 2011

Filed #2404 for the first issue

@gseguin gseguin added a commit to gseguin/jquery-mobile that referenced this issue Sep 14, 2011
@gseguin gseguin Fix for issue #1899
Refactored some css classes
Fixed bottom corners in set with only one collapsible
@gseguin gseguin added a commit to gseguin/jquery-mobile that referenced this issue Sep 14, 2011
@gseguin gseguin Fix for #1899:
Re-styled collapsible and collapsible set so the content of the collapsible now is applied the ui-btn-up-%%theme%% class. This way the border will match the border of the header button. In the meantime in the ui-collapsible-content class we remove the background image and tweak the margin/padding to make everything look good.
Combined the expand/collapse handlers into a single one and made extensive use of .toggleClass()

I just check out this branch and I really like the simplified +/1 icons (buttonless). @scottjehl - want to weigh in before we push this to master?


Ok, so the suggestion on this is to not set a bg color or stroke unless the user adds the data attribute to set the theme swatch for the content block. We also need to make sure you can set this on the accordion parent so it ripples through.

@gseguin - once this is in, we're good to go. Looks great.

@gseguin gseguin added a commit that referenced this issue Sep 25, 2011
@gseguin gseguin Fix for #1899
Added data-content-theme to style the content of the collapsible
data-theme and data-content-theme inherit collapsible-set's
gseguin commented Sep 25, 2011

Landed branch collapsible-redesign which takes care of this issue and many other ones.

@gseguin gseguin closed this Sep 25, 2011
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment