title: Change hover button class from onClick of other div
body: <p>That button changes "TE LAAT" into "NU BETALEN" on hover with CSS, which works like a charm. Now I want the "TE LAAT" text to change only when you click the "collapsible-header" div. So when that div becomes active (I added that class now, but the active class toggles when you click it.) the text in the button changes to NU BETALEN.</p>
  
  <p>Basically change the "TE LAAT" into the data-hover or data-active "NU BETALEN" when the div collapsible-header also has the active class.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.collapsible-header.active {
      background-color: #e4e4e4;
  }
  
  /* .button */
  .button {
      display: inline-block;
      position: relative;
      min-width: 7rem;
      margin-top: 3.7em;
      margin-right: 15px;
      padding: 5 6px;
      border: 3px solid #EE6E73;
      border-radius: 2px;
      overflow: hidden;
      text-decoration: none;
      font-size: 0.8rem;
      font-weight: bold;
      outline: none;
      color: #fff;
      background-color: #EE6E73;
      font-family: 'Roboto', sans-serif;
      line-height: 1.7rem !important;
  }
  
  .button span {
      -webkit-transition: 0.6s;
      -moz-transition: 0.6s;
      -o-transition: 0.6s;
      transition: 0.6s;
      -webkit-transition-delay: 0.2s;
      -moz-transition-delay: 0.2s;
      -o-transition-delay: 0.2s;
      transition-delay: 0.2s;
  }
  
  .button:before,
  .button:after {
      content: '';
      position: absolute;
      top: ;
      left: 0;
      width: 100%;
      text-align: center;
      opacity: 0;
      -webkit-transition: .4s,opacity .6s;
      -moz-transition: .4s,opacity .6s;
      -o-transition: .4s,opacity .6s;
      transition: .4s,opacity .6s;
  }
  
  /* :before */
  
  .button:before {
      content: attr(data-hover);
      -webkit-transform: translate(-150%,0);
      -moz-transform: translate(-150%,0);
      -ms-transform: translate(-150%,0);
      -o-transform: translate(-150%,0);
      transform: translate(-150%,0);
  }
  
  /* :after */
  
  .button:after {
      content: attr(data-active);
      -webkit-transform: translate(150%,0);
      -moz-transform: translate(150%,0);
      -ms-transform: translate(150%,0);
      -o-transform: translate(150%,0);
      transform: translate(150%,0);
  }
  
  /* Span on :hover and :active */
  
  .button:hover span,
  .button:active span {
      opacity: 0;
      -webkit-transform: scale(0.3);
      -moz-transform: scale(0.3);
      -ms-transform: scale(0.3);
      -o-transform: scale(0.3);
      transform: scale(0.3);
  }
  
  /*
      We show :before pseudo-element on :hover
      and :after pseudo-element on :active
  */
  
  .button:hover:before,
  .button:active:after {
      opacity: 1;
      -webkit-transform: translate(0,0);
      -moz-transform: translate(0,0);
      -ms-transform: translate(0,0);
      -o-transform: translate(0,0);
      transform: translate(0,0);
      -webkit-transition-delay: .4s;
      -moz-transition-delay: .4s;
      -o-transition-delay: .4s;
      transition-delay: .4s;
  }
  
  /*
    We hide :before pseudo-element on :active
  */
  
  .button:active:before {
      -webkit-transform: translate(-150%,0);
      -moz-transform: translate(-150%,0);
      -ms-transform: translate(-150%,0);
      -o-transform: translate(-150%,0);
      transform: translate(-150%,0);
      -webkit-transition-delay: 0s;
      -moz-transition-delay: 0s;
      -o-transition-delay: 0s;
      transition-delay: 0s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://raw.githubusercontent.com/Dogfalo/materialize/master/css/ghpages-materialize.css" rel="stylesheet"/&gt;
  &lt;button class="button right" type="button" data-hover="NU BETALEN" data-active="NU BETALEN TWEE"&gt;&lt;span&gt;TE LAAT&lt;/span&gt;&lt;/button&gt;
  &lt;div class="collapsible-header active"&gt;
    &lt;p&gt;content&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>