Tengo 2 listas plegables y 2 botones, si hago clic en el primer botón, el color de todos los encabezados del segundo <ul> debería cambiar (por ejemplo, verde) y si hago clic en el segundo botón, el color de todos los cuerpos en el segundo <ul> debería cambiar (por ejemplo, negro).
Estoy buscando una solución en JavaScript (jQuery también es posible). El problema es que soy nuevo en todo esto y no tengo idea de cómo resolver esta tarea. Estoy agradecido por cada ayuda.
<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>En el botón, haga clic en agregar o eliminar la clase css:
$('#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>