Change Collapse-Header colour when selection is made from a Select drop-down-CodePudding

Have a standalone Google Web App script that presents about five collapsible to a user. When one of these collapsibles is select it reveals a list of questions based upon Materialize's Select templates.

My question - is it possible if an option is selected it can change the collapsible header's colour?

Within the function colormebadd have managed to have an alert pop on the page - thus know that the listener event is picking up the change.

Anyone any ideas? MRE is below.

PS typo found within replies has been corrected

//Materialize Installs

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

$(document).ready(function() {
  $('select').formSelect();
});

var sel = document.getElementById('question1');

sel.addEventListener("change", colormebadd);

function colormebadd() {

  if (sel.value === '1') {


    $('.collapsible-header').css('color', '#f44336 red');

    //using Materialize's colour range
    //https://materializecss.com/color.html
  }
}

h1 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: white;
}

h2 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

//Settings for Collapsibles

.dropdown-content li span,
.select-wrapper input.select-dropdown {
  background-color: #536dfe;
  color: #ffc700;
}

.select-wrapper .caret {
  fill: #536dfe;
}

.collapsible,
.collapsible-header,
.collapsible-body {
  border: none;
  !important
}

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
  <?!= include("page-css");?>
</head>

<body>

  <body style="background-color:#2f34d0;">

    <h1>
      Data Input Form
    </h1>


    <ul >
      <li>
        <div ><b><h3>Animal Vegetable or Mineral?</h3></b></div>
        <div ><span>      

    <div class ="row">
      <div >
      <select id ="question1">
     <option value="" disabled selected>Are you human?</option>
      <option value="1">Yes</option>
      <option value="2">No</option>
      </select>

      <label ><i>Turing Test?</i></label>
            
      </div>
      </div>

    <div class ="row">
      <div >
      <select id ="question1">
     <option value="" disabled selected>Are you a mineral?</option>
      <option value="1">Yes</option>
      <option value="2">No</option>
      </select>

      <label ><i>Mineral?</i></label>
            
      </div>
      </div>

<!-- End of questions area -->

</span></div>
      </li>






      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
      <?!= include("page-JS");?>

  </body>


</html>

CodePudding user response：

The text of "collapsible-header" belongs to a child, h3, since there a styles applied to that child, instead of selecting "collapsible-header", select the h3, in other words:

replace $('.collapsible-header').css('color', '#f44336 red');
by $('h3').css('color', 'red');

//Materialize Installs

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

$(document).ready(function() {
  $('select').formSelect();
});

var sel = document.getElementById('question1');

sel.addEventListener("change", colormebadd);

function colormebadd() {

  if (sel.value === '1') {


    $('h3').css('color', 'red');

    //using Materialize's colour range
    //https://materializecss.com/color.html
  }
}

h1 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: white;
}

h2 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: white;
}

h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

//Settings for Collapsibles

.dropdown-content li span,
.select-wrapper input.select-dropdown {
  background-color: #536dfe;
  color: #ffc700;
}

.select-wrapper .caret {
  fill: #536dfe;
}

.collapsible,
.collapsible-header,
.collapsible-body {
  border: none;
  !important
}

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
  <?!= include("page-css");?>
</head>

<body>

  <body style="background-color:#2f34d0;">

    <h1>
      Data Input Form
    </h1>


    <ul >
      <li>
        <div ><b><h3>Animal Vegetable or Mineral?</h3></b></div>
        <div ><span>      

    <div class ="row">
      <div >
      <select id ="question1">
     <option value="" disabled selected>Are you human?</option>
      <option value="1">Yes</option>
      <option value="2">No</option>
      </select>

      <label ><i>Turing Test?</i></label>
            
      </div>
      </div>

    <div class ="row">
      <div >
      <select id ="question1">
     <option value="" disabled selected>Are you a mineral?</option>
      <option value="1">Yes</option>
      <option value="2">No</option>
      </select>

      <label ><i>Mineral?</i></label>
            
      </div>
      </div>

<!-- End of questions area -->

</span></div>
      </li>






      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
      <?!= include("page-JS");?>

  </body>


</html>

How to change CSS using jQuery?