CODEWITHSUNDEEP
jquerycssmaterialize
FPcond
FPcond

Reputation: 591

materializeCSS collapsible active change icon.

I am looking for some help with collapsible I am trying to change the icon on the headers when they are active but cant seem to solve the problem of if I click on another header without closing the first one having the proper icon being displayed.

Here is a codepen with an example of my issue. http://codepen.io/FPC/pen/xZEWVY

here is my code:

<div class="container">
  <div class="row">
    <div class="col s6">
      <ul class="collapsible popout" data-collapsible="accordion">
        <li>
          <div class="collapsible-header">
            <i class="material-icons right more">expand_more</i>
            <i class="material-icons right less" style="display: none">expand_less</i>
            Article Title
          </div>
          <div class="collapsible-body">
            <p>
              Content Snipit        
            </p>
          </div>
        </li>
        <li>
          <div class="collapsible-header">
            <i class="material-icons right more">expand_more</i>
            <i class="material-icons right less" style="display: none">expand_less</i>
            Article Title
          </div>
          <div class="collapsible-body">
            <p>
              Content Snipit
            </p>
          </div>
        </li>
        <li>
          <div class="collapsible-header">
            <i class="material-icons right more">expand_more</i>
            <i class="material-icons right less" style="display: none">expand_less</i>
            Article Title
          </div>
          <div class="collapsible-body">
            <p>
              Content Snipit
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

here is the JS I am using

    $(document).ready(function(){
  $( ".collapsible-header" ).click(function() {
      $(".more",this).toggle()
      $(".less", this).toggle()
  });
});

Upvotes: 6

Views: 11058

Answers (5)

Kweku Hardman
Kweku Hardman

Reputation: 1

I wanted to change the open icon to close when collapsible opens and vise versa in the the "DOM" with Materialize CSS.

This is how I did it.

<span class="mdi mdi-minus black-text" @click="ShowForm = !ShowForm" v-if="ShowForm"> What is agile team development?</span> <span class="mdi mdi-plus black-text" @click="ShowForm = !ShowForm" v-else>What is agile team development?</span>

This is the js. data() {return {ShowForm: false,

Upvotes: 0

Alberto Saint
Alberto Saint

Reputation: 144

None of the existing answers worked for me, they keep inverting the other icons

I added to the CSS

li.active .collapsible-header .material-icons.iconcollapse {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}

The collapse/expand

<div class="collapsible-header">
<i class="material-icons iconcollapse">filter_drama</i>

Upvotes: 1

cweitat
cweitat

Reputation: 1257

The above two solutions still flip other icons in the collapsible header the other way round. The perfect solution will be to add a class to the icon.

<div class="collapsible-header">
<i class="material-icons vertical-align">filter_drama</i>
Header 1
<i class="material-icons right expand">expand_less</i>
</div>

Notice that a "expand" class is created. CSS would be similar to the above two, just that "expand" will be created

.collapsible-header.active i.expand {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
  }

Upvotes: 1

The Heavy Rhino
The Heavy Rhino

Reputation: 91

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);
}

Upvotes: 9

Hakan
Hakan

Reputation: 1319

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);
}

Upvotes: 27

Related Questions