Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Collapsible Content: Info Icon Issue #4801

Closed
mdevera opened this Issue · 4 comments

3 participants

Michelle Devera Maurice Gottlieb Jasper de Groot
Michelle Devera

Hi guys,

Building a mobile web app and am using the collapsible content feature. We would like to use the "info" icon as the custom icon, for both the expanded and collapsed version of the content block.

The "info" icon displays for the collapsed version, but when clicked on, the icon changes to a plus icon, despite having a value of "info" for the data-expanded-icon attribute. Not sure if I'm missing something ..

I haven't tested to see if this is happening for any other icon, but thought I should bring it up.

Here's a jsbin link - http://jsbin.com/orucec/66/

Thanks,
M

Maurice Gottlieb

Hi @mdevera,

no, you missed nothing. Good catch btw!
Having the same non standard icon for collapsed and expanded state is not possible this time.
I'll try to land a fix for this issue that will pass the tests.

Maurice

Maurice Gottlieb

@mdevera

I've created a PR to fix this issue, but I don't know, if it will get in.

Another solution to achieve same icons for expanded and collapsed state is to use a CSS-rule like this:
div.ui-collapsible[data-expanded-icon="info"] span.ui-icon { background-position: -540px 50%; }
for the info icon.
Here is a fiddle to demonstrate that http://jsfiddle.net/MauriceG/Ga4Jj/

I don't use jsbin because a second css rule like that above (eg using grid-icon) does not work there ...

Maurice

Michelle Devera

Hey @MauriceG

Thank you for the reply and clarification. I'll give the CSS-rule a shot for now. :)

Much appreciated! :)

M

Ghislain Seguin gseguin referenced this issue from a commit
Ghislain Seguin gseguin Added test for issue #4801 a3626b7
Jasper de Groot

Closing as fixed by merging PR #4803.

Alexander Schmitz arschmitz referenced this issue from a commit in arschmitz/jquery-mobile
Ghislain Seguin gseguin Added test for issue #4801 43d8ad0
Sean Goresht srsgores referenced this issue from a commit in srsgores/jquery-mobile
Maurice Gottlieb MauriceG Collapsible: Add support for same expanded/collapsed non default icon
Fixes #4801 Collapsible Content: Info Icon Issue.
Having the same non standard icon for expanded and collapsed state, toggleClass removes the ui-icon-x class for collapsed state.
Tests: Passed.
a123d54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.