CODEWITHSUNDEEP
jquery-mobile
manutenfruits
manutenfruits

Reputation: 1577

Remove icon from collapsible set in jQuery Mobile

I've been trying to remove the icon from a collapsible set by setting the attribute data-iconpos="none" in the div that acts as the collapsible-set, but no luck. It would remove it but still leave some kind of shadow.

enter image description here

Upvotes: 2

Views: 13166

Answers (9)

Rusty Shacleford
Rusty Shacleford

Reputation: 138

Building upon what Demnogonis wrote, data-collapsed-icon="noicon" and data-expanded-icon="noicon" in conjustion with adding the class ui-nodisc-icon to the collapsible parent, worked for me. Otherwise there was an empty circle leftover.

http://view.jquerymobile.com/master/demos/icons/ Search: Removing the disc

Using JQM 1.4.5

Upvotes: 0

Demnogonis
Demnogonis

Reputation: 3222

Working with jQuery Mobile 1.4.0 you can also set the data-collapsed-icon and data-expanded-icon attributes to false.

<div data-role="collapsible" data-collapsed-icon="false" data-expanded-icon="false" data-theme="a">
     <h2>My Account</h2>

    <ul class="ui-listview mainNav" data-role="listview" data-theme="a">
        <li data-icon="carat-r"> <a href="#">Manage Account</a>

        </li>
        <li data-icon="carat-r"> <a href="#">Edit Profile</a>

        </li>
        <li data-icon="carat-r"> <a href="#">Upload Profile Picture</a>

        </li>
    </ul>
</div>

jsFiddle

Upvotes: 5

Tim Bee
Tim Bee

Reputation: 2230

Working with JQM 1.4.0rc1, there still seem to be some trouble with this. I had to use the following Javascript logic in my PageShow event to hide the icons completely:

$('#MyList').find('a.ui-collapsible-heading-toggle').each(function() {
    $(this).removeClass('ui-btn-icon-right');
});

Upvotes: 1

Shantanoo K
Shantanoo K

Reputation: 793

The best thing to do is the Li element for which you do not need any icon do following

$(<your-li-elment>).find("span.ui-icon').remove()

Upvotes: 0

Dipen Dedania
Dipen Dedania

Reputation: 1450

You can do it either with CSS or overwrite the JQM javascript.

  1. CSS

    .ui-collapsible-heading .ui-icon { display: none; }

  2. overwrite the JQM search for this line: collapsedIcon = $el.jqmData( "collapsed-icon" ) || o.collapsedIcon || "plus"; replace with: collapsedIcon = ($el.jqmData("collapsed-icon") =="none")? false : (o.collapsedIcon || "plus");

and add this attribute data-collapsed-icon="none" in html like below

 <li data-role="collapsible" data-inset="false"  data-collapsed-icon="none" data-icon="false">
       <h3>Section 1</h3>
       <p>I'm the collapsible set content for section 1.</p>
 </li>

Upvotes: -1

krilovich
krilovich

Reputation: 3505

give your collapsible set an id and then you can do the following

#myId >.ui-icon
{

 display: none;

}

This CSS look at all elements with the class .ui-icon inside your collapsible set and sets their display to none

Upvotes: -1

dirgardare
dirgardare

Reputation: 31

Note that the above solution will hide all icons within the collapsible fieldset.

To make sure you only hide the icon in the collapsible header use this:

.ui-collapsible-heading .ui-icon {
    display: none;
}

Since jquery mobile adds the class 'ui-collapsible-heading' to the heading inside the collapsible fieldset.

Should work until jquery mobile decides to change something ;)

Upvotes: 2

AJ J
AJ J

Reputation: 539

The only solution for this is using CSS, try adding a class to the collapsible such as: class='listItemNoIcon'

within your HTML file add this : 

<div  class='listItemNoIcon' data-role='collapsible' data-collapsed='false'>
</div>

and add this to your css file:

.listItemNoIcon .ui-icon
{

 display: none;

}

Upvotes: 7

Apostolos Emmanouilidis
Apostolos Emmanouilidis

Reputation: 7197

The jQM 1.1.1 data-attribute reference mentions that the possible values of the data-iconpos attribute for the Collapsible set are:

left | right | top | bottom | notext

Therefore maybe the only workaround is the solution with custom CSS.

Upvotes: -2

Related Questions