materializeCSS collapsible active change icon.
You don't need the use javascript for this
delete javascript and use only css
html
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<i class="material-icons">expand_less</i>First</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">expand_less</i>Second</div>
</li>
</ul>
css
.collapsible li.active i {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
As an addition to Hakan's answer, You can use the collapsible-header
class to avoid changing other icons within the collapsible class (accordion content). The CSS code that worked for me is:
CSS
.collapsible-header.active i {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}