Expand all code?

Question

I have some code that opens and closes drop downs but I wanted to add a expand all button and for some reason the code is not working. I think it is because I am not using the correct DOM handler. I used “nextElementSibling” to control the selection of the action item from the button but now I want it to control all of them. Help!! 😁

https://code.sololearn.com/WgH3825nLI1Y/?ref=app

Answer 1

Charles W Hsu
i have edited it for you. see my code.
both expands on expand all button
Upvote / follow / if you find my ans useful
https://code.sololearn.com/WYtu9JJwukHG

Answer 2

Charles W Hsu
it is working now
https://code.sololearn.com/WYtu9JJwukHG

Answer 3

Charles W Hsu loop just work on the last element

Answer 4

i have understood but the loop is effecting only on the last loop

Answer 5

Charles W Hsu
please read this article this may solve your problem

https://dzone.com/articles/why-does-javascript-loop-only-use-last-value

Answer 6

Charles W Hsu when u solve your problem share it with me

Answer 7

Line 103
all[i].addEventListener("click",

Error msg says this is 'undefined'. Value of 'i' becomes 1 from the previous part. There is only 1 element in 'all' so it's undefined.

This gets rid of that error, but further errors are encountered as you go. This should help a bit though. I'm on train and nearly at work so that's all I got time for 😁

Answer 8

Charles W Hsu you've had numerous responses to help you, including mine. It would be appreciated if there was some sort of thanks, even if it's just liking the responses. People are more inclined to help when there is gratitude.

Answer 9

Hi Charles W Hsu, my apologies, I missed the last part of that post.

Thank you and hope you can sort out your problem.

Answer 10

its not that big of a deal. I am learning and am wondering why it is not working with how I planned out the code. It is my low level knowledge of the code that is frustrating me.

Answer 11

Have a look at this suggestion. I added 'onclick=expandAll();

The function then just loops through the number of elements of that class you defined and changes the maxheight.

Think this is what you meant. You should be able to add as many as you like with the same class and not have to change the script. You may just want to tidy up the maxheight as my value was just an example.
https://code.sololearn.com/WA7gqk02addS/?ref=app

Answer 12

Thanks Duncan. I will try this out tomorrow. I really apreciate the help. I learn with every problem I have.

Answer 13

Amir, The problem with this code is there is no way to toggle the button to expand all and then back to collapsing all. Also, I will not be able to add new div's without also changing the script code at the bottom. I was hoping to find a solution to this by calling all of the classes on the page.

Answer 14

Amir,

I gave an example. You will see that when you add a new "div" it doesn't work. This is the reason I wrote the code the way I did. Your idea makes it work but the problem is I cant randomly add new div's tot he HTML. This is the reason why I am hoping to just find the solution to the issue by just finding the way to edit just the DOM element. I really appreciate your efforts though! Thank you!
https://code.sololearn.com/W2duhfTG1iy9/?ref=app

Answer 15

Amir, I just added the code link. Take a look and you will see what I am talking about.

Answer 16

Yes, that is the problem. Here is an example of the code with just the individual expanding buttons.

https://code.sololearn.com/WxSUwiOyUaPm

Answer 17

If you read above I thanked Amir. Duncan, I thank you for your help as well. I am using another blog right now. so I dont check this very often. I am sorry you feel I have not thanked you.

Answer 18

Thanks Amir!

Answer 19

Sure!! I will post it when I fix it.