Develop Reference

How can I target each item in a list with collapsible items? [duplicate]

This question already has answers here:
Creating an HTML collapse accordion with CSS and JavaScript
(2 answers)
Vanilla Javascript Accordion Functionality
(3 answers)
Only open one accordion tab at one time
(5 answers)
Closed 2 years ago.
I have a list of div elements, each containing a header and a body section. Only the header of each item is initially displayed, and when clicked, the corresponding body should appear below the header. When the header is clicked again, the body should disappear. The logic I use is to append/remove the class name "extended" on each list item, in order to display and hide the body section through CSS.
Now, I am trying to create a dynamic script to allow virtually infinite list entries, without having to target each item specifically, but I cannot get it to work for all items.
HTML
<div class="list-wrapper">
<div class="chapter chapter-1">
<div class="chapter-header"></div>
<div class="chapter-body"></div>
</div>
<div class="chapter chapter-2">
<div class="chapter-header"></div>
<div class="chapter-body"></div>
</div>
<div class="chapter chapter-3">
<div class="chapter-header"></div>
<div class="chapter-body"></div>
</div>
</div>
JavaScript
var chapter = document.getElementsByClassName('chapter')[0];
var chapterHeader = document.getElementsByClassName('chapter-header')[0];
chapterHeader.addEventListener("click", function(){
chapter.classList.toggle("extended");
});
The code above works fine for the first item but obviously not for the rest. Any ideas ? I'm interested in vanilla JavaScript code. Thanks in advance.

You need to use method forEach() to work with a collection of classes. And also method closest(), which allows you to refer to the specified parent of the current element.
Try this it code:
let chapterHeader = document.querySelectorAll('.chapter-header');
chapterHeader.forEach(function(chapterHeader_current, index) {
chapterHeader_current.addEventListener('click', function() {
let current_chapter = this.closest('.chapter');
current_chapter.classList.toggle("extended");
});
});

Event bubbling is the keyword.
Add only one event to the container. When you click on the container it first handles the inner element and then the outer elements.
let list = document.getElementById("myList");
list.addEventListener("click", function(event) {
// Do stuff with target
console.log(event.target.className);
})
<div id="myList" class="list-wrapper">
<div class="chapter chapter-1">
<div class="chapter-header">Chapter header 1</div>
<div class="chapter-body">Chapter body 1</div>
</div>
<div class="chapter chapter-2">
<div class="chapter-header">Chapter header 2</div>
<div class="chapter-body">Chapter body 2</div>
</div>
<div class="chapter chapter-3">
<div class="chapter-header">Chapter header 3</div>
<div class="chapter-body">Chapter body 2</div>
</div>
</div>

something like this i believe
chapterHeader.addEventListener("click", function(this){
this.nextSibling.classList.toggle("extended");
});

How to edit text in a div thats in a div thats in another div with javascript [duplicate]

This question already has answers here:
How do I change the text of a span element using JavaScript?
(18 answers)
Closed 5 years ago.
I want to know what javascript code I can use to edit the text of this word?
This is not a duplicate because this has multiple divs in a div. And the target word is located in a div that is inside the more divs.
<div id="jump">
<div class="kick">
<div class="meet">
<div class="balls">
<div class="word">
Hello
</div>
</div>
</div>

It's the 1st element that has this class...
document.getElementsByClassName('word')[0].innerHTML='Goodbye';
It's the 5th element that has this tag...
document.getElementsByTagName('div')[4].innerHTML='Goodbye';

You can use next code:
document.querySelector('.word').textContent = 'Hello World!';
<div id="jump">
<div class="kick">
<div class="meet">
<div class="balls">
<div class="word">
Hello
</div>
</div>
</div>
But if you has few elements with class word, function 'querySelectror fining only first element'.If you need get many elements, you can use document.querySelectorAll --- is HTMLCollection (not array).
I don't recommend to use getElementByClassName - is very slowly method.
Method getElementsByTagName -faster that querySelectorAll , but it use only tagName. getElementById -is the fastest menthod finding of elements.
But that method find only first element with current ID.

Replace div with new div using jQuery or javascript [duplicate]

This question already has answers here:
Replace Div with another Div
(3 answers)
Closed 6 years ago.
I need a simple solution for replacing a div with a new div, cross-browser compatible using javascript or JQuery. I'll add some code below. Div "myDiv-B" needs to be replaced by a new div:
<div id="myDiv-C">{% include 'snippets/contactpaneel.rain' %}</div>
Here are my divs
<div id="myDiv-A">
<div id="myDiv-B"></div>
</div>

You should use .replaceWith() method.
.replaceWith method replace each element in the set of matched
elements.
$('#myDiv-B').replaceWith('<div>Hello</div>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv-A">
<div id="myDiv-B"></div>
</div>

How can I define something like OR in jQuery's selector? [duplicate]

This question already has answers here:
jQuery OR Selector?
(6 answers)
Closed 6 years ago.
Here is my current code:
$(".close_btn").click(function(e) {
$(".box1").fadeOut(100);
$(".box2").fadeOut(100);
});
As you see, currently, when you click on .close_btn, both .box1 and .box2 will be hidden. Now I want to use $(this) and .closest() to hide just one box (the parent of clicked .close_btn, there are two .close_btn). I mean I want something like this:
$(".close_btn").click(function(e) {
$(this).closest(".box1" OR ".box2").fadeOut(100);
});
Is doing that possible?

You can just use a comma to separate multiple selectors:
$(".close_btn").click(function(e) {
$(this).closest(".box2, .box1").fadeOut(100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box1">
<button class="close_btn">Close</button>
</div>
<div class="box2">
<button class="close_btn">Close</button>
</div>

Search class for specific text and return entry number [duplicate]

This question already has answers here:
How can I find elements by text content with jQuery?
(8 answers)
Closed 6 years ago.
I have a kind of unique need of finding one div on all divs with same class name that has a specific copy, and return the entry number:
<div class="alertme"></div>
<div class="alertme"></div>
<div class="alertme">This text</div>
<div class="alertme"></div>
So it would return 2, being 0 is the first div.

I'm not sure if that what you want, but to get the index of the div that has the This text text you could use :contains selector with .index() method :
$('.alertme:contains("This text")').index();
Hope this helps.
console.log($('.alertme:contains("This text")').index());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alertme"></div>
<div class="alertme"></div>
<div class="alertme">This text</div>
<div class="alertme"></div>