Develop Reference

I've created a toggle menu but this toggling only works for the first selected HTML element, How to fix this error? any reply would be helpful. Tnx :) [duplicate]

This question already has answers here:
JavaScript and getElementById for multiple elements with the same ID
(13 answers)
Closed 1 year ago.
full code is here : https://github.com/M-lakshan/toggle-menu-test.git
//common toggle part in the HTML(only the first div tag class "Qi" may differ...
//there are 5 of them(as Qi,Qii,Qiii,Qiv,Qv)
<main>
<!--***-->
<div class="Qi">
<div class="tab">
<a id="anchor" class="active">
How many team members can I invite?
<img id="clickingArrow" class="active" src="./icon-arrow-down.svg" alt="click-arrow">
</a>
<div id="dropdown" class="active">
<p class="text">
You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.
</p>
</div>
</div>
</div>
<hr>
<!--***-->
</main>
//just JS
const arrowS = document.querySelectorAll("#clickingArrow");
arrowS.forEach(function(arrow) {
arrow.addEventListener( "click", function(titlePop) {
setTimeout ( () => {
//for dropdown
let text = document.getElementById("dropdown");
text.classList.toggle("active");
}, 500);
//for anchor
const container = titlePop.currentTarget.parentElement;
container.classList.toggle("active");
//for clickingArrow
this.classList.toggle("active");
});
});
This only works for the first toggle element in the HTML. full code(with HTML & CSS) is available in my provided Github link.

Looking at your GitHub code, and the code in the question, it appears that you are using the same ID for multiple elements on the page. This would explain the issue you are experiencing as IDs should always be unique across a page. I would suggest instead using classes to be added to each id.
For example:
<img class="clickingArrow active" src="./icon-arrow-down.svg" alt="click-arrow">
and the selector const arrowS = document.querySelectorAll(".clickingArrow"); should help in fixing this problem.
If it is imperative that you use IDs, then add a unique identifier to each, for example: <img id="clickingArrow_1" class="active" src="./icon-arrow-down.svg" alt="click-arrow"> and adjust your selctor accordingly.

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.

Replacing background image using jQuery not working [duplicate]

This question already has answers here:
Switching a DIV background image with jQuery
(14 answers)
Closed 8 years ago.
I have created a parent div. Inside that div there are multiple child divs: the first one is holding a background image, the second one, the website name, and the third one, some text.
Using jQuery, when a user hovers on the second div, i.e. website name div, the third div i.e text div is visible.
Now what I want is, when the text div becomes visible, to also replace the image in the first div. Here is my HTML and jQuery code so far:
HTML:
<div class="layer-3" style="opacity: 1;">
<a href="#">
<div class="contentImg3">{Div holding the image as a background}</div>
<div class="contentBlock3" style="opacity: 1;">
<span class="btn-block">
<span class="help-block webHdln">Website Name</span>
</span>
</div>
<div class="contentText3">text Div</div>
</a>
</div>
<!-- .layer-2 ENDS -->
JS:
$(".contentBlock3").mouseenter(function () {
$('.contentText3').fadeIn(1500);
$('.contentImg').css("background-image", "images/gurus_bw.jpg)");
$('.contentImg').css("background-position", "top 30px)");
});
The CSS line is not working... What am I doing wrong ?

change
$('.contentImg').css("background-image", "images/gurus_bw.jpg)"); // miss: url(..
to
$('.contentImg').css("background-image", "url(images/gurus_bw.jpg)");
read CSS background-image Property

multiple onclick's in HTML

I have a an HTML page with a list of 20 topics on it. I would like it so that when you click on one of those topics, 2 or 3 articles with links pop up underneath it.
I'm trying onclick but it means writing lots of code as you have to declare all the div styles for each of my topics.
Is there an easy way of doing this?
im currently writing this 20 times, and declaring 60 div styles:
<div class = "mousehand"
id = "show_first"
onclick ="this.style.display = 'none';
document.getElementById('show_second').style.display='block';
document.getElementById('dropdown').style.display='inline';
"> show text </div>
<div class = "mousehand"
id = "show_second"
onclick ="this.style.display = 'none';
document.getElementById('show_first').style.display='block';
document.getElementById('dropdown').style.display='none';
"> hide text </div>
<div id ="dropdown"> this is the text to be shown</div>

You can accomplish this with some Javascript. Add a ul within the li:
<li>Title
<ul>
...
</ul>
</li>
Set the inner ul's display to none using CSS. Then using Javascript, make a function that changes the display property of the inner ul to block.

As has been mentioned, jQuery can make this very straightforward, but your major code saving is going to come from taking advantage of event bubbling. You can do this is you structure your HTML something like this:
<div id="topics">
<div class="item">
<div class="show">
show text 1
</div>
<div class="hide">
hide text 1
</div>
<div class="text">
this is the text to be shown 1
</div>
</div>
<div class="item">
<div class="show">
show text 2
</div>
<div class="hide">
hide text 2
</div>
<div class="text">
this is the text to be shown 2
</div>
</div>
</div>
Now instead of attaching an onclick handler to each end every div, attach it to the parent element. To do this with jQuery:
$(window).load(function(){ //Do this when the page loads
$('#topics').bind('click', function(event) { //Find the element with ID 'topics' and attach a click handler
var t = $(event.target); //event.target is the element that was actually clicked, $() gets the jQuery version of it
if(t.hasClass('show')) { //If it is a 'show' element...
t.siblings('.hide').show(); //...show the other two elements...
t.siblings('.text').show();
t.hide(); //...and hide the clicked element
}
if(t.hasClass('hide')) { //If it is a 'hide' element...
t.siblings('.show').show(); //...show the 'show' element...
t.siblings('.text').hide(); //...and hide the other two
t.hide();
}
});
});
And that's it! Here's a demo.