How to change the color of a full collapsible-ul(Materialize,Html,Javascript,Css)?

user_16333495 0
Viewed 71

I have 2 collapsible-lists and 2 buttons, if I click on the first button, the color of all headers of the second <ul> should change (for example green) and if I click on the second button the color of all bodys in the second <ul> should change (for example black).

I'm searching for a solution in JavaScript (jQuery also possible). The Problem is that I'm new in all of this and have no idea how to solve this task. I'm thankful for every help.

My code

 <ul class="collapsible" id="1">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>

 <ul class="collapsible" id="2">
    <li>
      <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
      <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
      <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
  </ul>
<button class="btn yellow" id="collapsible-header-green">Change collor of all headers ul(id="2")</button>
<button class="btn yellow" id="collapsible-body-green"> Change collor of all bodys ul(id="2")</button>
materialize css html jquery javascript
1 Answers

On buttton click add or remove css class:

$('#collapsible-header-green').on('click', function() {
    if($('#2 .red-header').length > 0) {
        $('#2 .collapsible-header').removeClass('red-header');
    } else {
        $('#2 .collapsible-header').addClass('red-header');
    }               
});
          
$('#collapsible-body-green').on('click', function() {
    if($('#2 .green-body').length > 0) {
        $('#2 .collapsible-body').removeClass('green-body');
    } else {
        $('#2 .collapsible-body').addClass('green-body');
    }
});

<style>
  .red-header {
    color: red;
  }
  
  .green-body {
    color: green;
  }
</style>
user_33309470
Related