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.
<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>
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>