I have 2 collapsible-lists and 2 buttons, I want that if I click on the first button all headers in the first list get a new text(like "Hello my name is Max") and if I click on the second button, it should add a new button to all body's of the second list.
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 text of all headers ul(id="1")</button>
<button class="btn yellow" id="collapsible-body-green"> Add buttons to all body's ul(id="2")</button>
Here is the code:
// change text in first list when click first button
const list1 = document.getElementById("1");
const button1 = document.getElementById("collapsible-header-green");
button1.onclick = function () {
const elements = list1.getElementsByClassName("collapsible-header");
for (let element of elements) {
element.innerHTML = "new text";
}
};
// add button in second list when click second button
const list2 = document.getElementById("2");
const button2 = document.getElementById("collapsible-body-green");
button2.onclick = function () {
const elements = list2.getElementsByClassName("collapsible-body");
for (let element of elements) {
const newButton = document.createElement("button");
newButton.innerHTML = "new button";
element.appendChild(newButton);
}
};<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 text of all headers ul(id="1")</button>
<button class="btn yellow" id="collapsible-body-green"> Add buttons to all body's ul(id="2")</button>