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

Question

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 class="collapsible">
      <li>
        <div class="collapsible-header #3d5afe indigo accent-4"><b><h3>Animal Vegetable or Mineral?</h3></b></div>
        <div class="collapsible-body #536dfe indigo accent-2"><span>      

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

      <label class="white-text"><i>Turing Test?</i></label>
            
      </div>
      </div>

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

      <label class="white-text"><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>

Please replace the current code by a [mcve] ( so far it's not crystal clear what `$` means in your code, and what libraries are used) — Rubén, Aug 02 '22 at 22:24
I think that when only your showing script is used, when the dropdown list is changed to "Yes", the background color of "HEADER" is changed with `$('.collapsible-header').css('background','white');`. So, I cannot understand `but nothing is happening`. In order to correctly understand your current issue, can you provide the detailed flow for correctly replicating your current issue? By the way, if the background color of the body is white, you might not be able to notice the change of color. So, in that case, how about testing `$('.collapsible-header').css('background','red');`? — Tanaike, Aug 03 '22 at 00:29

Rubén · Accepted Answer · 2022-08-03T22:30:19.510

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 class="collapsible">
      <li>
        <div class="collapsible-header #3d5afe indigo accent-4"><b><h3>Animal Vegetable or Mineral?</h3></b></div>
        <div class="collapsible-body #536dfe indigo accent-2"><span>      

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

      <label class="white-text"><i>Turing Test?</i></label>
            
      </div>
      </div>

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

      <label class="white-text"><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?

Thanks for your answer and with a bespoke tweek it worked. Really appreciate the link to the JS query library. — David Howarth, Aug 04 '22 at 09:14
Ruben imagine that you know this. However writing it for other newbies. FYI to make sure that the JS change query didn't effect all h3 elements - you have to give each collapsible an id.
Animal Vegetable or Mineral?
Within JS File: $('#whatelement').css('color', 'red'); — David Howarth, Aug 04 '22 at 09:17

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

1 Answers1

Animal Vegetable or Mineral?