Change color to accordion of Materializecss

Question

Change color to accordion of Materializecss

Navigation

#1 by (1 votes)

1

I have an accordion from Materialize that when clicking shows a table, what I want to do is that when I give in the "title" (the div that has the collapsible-header class), I change the color class of that same div and when I click to return to the original color, I put a snapshot of what I intend to do.

Materializecss accordion documentation

javascript css3 color materialize accordion

asked by José Carlos Castillo 19.04.2018 в 19:36

source

1 answer

Set a selectpicker bootstrap text property of the textview class of android

score 1 · Accepted Answer

Adding this style should work:

li.active .collapsible-header{ 
    background-color:red; 
    color:white;//este es solo para mi ejemplo
}

I leave you a functional example:

EDIT

If you want to keep the classes you had already assigned, this could work:

li.active .collapsible-header{ 
    background-color:red!important; 
    color:white;//este es solo para mi ejemplo
}

$(document).ready(function(){
  $('.collapsible').collapsible();
});

li.active .collapsible-header{ 
   background-color:red!important; 
   color:white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
            
<ul class="collapsible collapsible-accordion">
          <li class="active">
            <div class="collapsible-header blue-grey darken-1" tabindex="0"><i class="material-icons">filter_drama</i></div>
            <div class="collapsible-body" style="display: block;"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
          </li>
          <li>
            <div class="collapsible-header blue-grey darken-1" tabindex="0"><i class="material-icons">place</i></div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
          </li>
          <li>
            <div class="collapsible-header blue-grey darken-1" tabindex="0"><i class="material-icons">whatshot</i></div>
            <div class="collapsible-body"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span></div>
          </li>
        </ul>