heyyy (: i donttt know how to make a box, so i just googled and used one already made. issue is, it works great EXCEPT for the other boxes?
i checked and the copy paste is the exact same, i tried to create different collapsible divs but that didnt work either. only the “clouded” one becomes active while the others dont?
my codepen → https://codepen.io/catraa/pen/QWojorg
info: it’s for the css area “songs”, the light blue box
@Catra, are you trying to create a collapsible box or accordion? A lot of the examples you’ll find on Google use way too much unnecessary JavaScript.
What you’re trying to do with custom elements and JS is already available in HTML5 via the <details> and <summary> elements.
For example:
<details>
<summary>clouded</summary>
<p>i made this song to release it on february 29th, i struggle with getting things out and thought it'd be fun to release something on a leap day. and since i'd have to wait 4 more years i took the shot and released it, tho i wasnt fully satisfied with it.</p>
<p>the song is about people who fantasize of you in a certain way, to be someone you arent. people who live in their heads to the point of having faked a connection with a twisted image of you</p>
</details>
<details>
<summary>seen as soon as</summary>
<p>when you live through an amazing moment and then remember that the present you're in will become a memory, and it upsets you that this moment will turn into a memory. near impossible to recreate again one day.</p>
</details>
<details>
<summary>everything reminds me of you</summary>
<p>i typically never gravitate towards the piano (this is a synth), it sounds too simple and reminds me of balads which i dislike a lot. and they seem to easy and simple to mess around with? but when i made this i couldnt help but want anything else than this fake sounding piano, it fit in my ears right with this chord progression i had made years prior, but never done anything with. the entire song was done really fast, i didnt need for it to sound perfect.</p>
<p>everytime i worked on this song it reminded me of this person, didn't intend it to be about them but i couldnt name it anything else.</p>
</details>
You don’t need JavaScript for this unless you want to close every <details> element but the one you’ve just opened. Here’s how I do that.
window.addEventListener("load", loadHandler);
function loadHandler() {
createDetailsToggle();
}
function createDetailsToggle() {
const details = document.querySelectorAll("details");
details.forEach((targetDetail) => {
targetDetail.addEventListener("click", () => {
details.forEach((detail) => {
if (detail !== targetDetail) {
detail.removeAttribute("open");
}
});
});
});
}
let btn = document.getElementsByClassName("collapse");
btn[0] will refer to the first button found, so repeated use won’t work like you want.
+1 for the solution @starbreaker provided. The details element is great!
Just to note, while doesn’t yet have support across all modern browsers, it’s also possible to link multiple <details> elements together so that only one is open at a time with the name attribute (all set to the same value):
<details name="songs">
<summary>clouded</summary>
<p>i made this song to release it on february 29th, i struggle with getting things out and thought it'd be fun to release something on a leap day. and since i'd have to wait 4 more years i took the shot and released it, tho i wasnt fully satisfied with it.</p>
<p>the song is about people who fantasize of you in a certain way, to be someone you arent. people who live in their heads to the point of having faked a connection with a twisted image of you</p>
</details>
<details name="songs">
<summary>seen as soon as</summary>
<p>when you live through an amazing moment and then remember that the present you're in will become a memory, and it upsets you that this moment will turn into a memory. near impossible to recreate again one day.</p>
</details>
<details name="songs">
<summary>everything reminds me of you</summary>
<p>i typically never gravitate towards the piano (this is a synth), it sounds too simple and reminds me of balads which i dislike a lot. and they seem to easy and simple to mess around with? but when i made this i couldnt help but want anything else than this fake sounding piano, it fit in my ears right with this chord progression i had made years prior, but never done anything with. the entire song was done really fast, i didnt need for it to sound perfect.</p>
<p>everytime i worked on this song it reminded me of this person, didn't intend it to be about them but i couldnt name it anything else.</p>
</details>
So if you were to use the JavaScript from @starbreaker, and later on down the line when <details name="..."> has better browser support, it’ll be relatively trivial to add the name attribute to your <details> elements and strip out the JavaScript.
Note: you probably don’t want to mix using the name attribute at the same time as the JavaScript is there, as you may get conflicts between them in browsers that do currently support <details name="...">!
@Ravenous, I didn’t know about the name attribute for details, most likely because Mozilla hasn’t gotten around to implementing it yet. Looking forward to being able to rip out that bit of JS myself. 
oh i’ve never heard of the term accordion before??? that is it
okay i see, didnt know java was incorporated in html before? thats honestly great, i never wanted to learn java since i cant even manage css/html properly yet
ah so thats why no other button worked :c thanks!
thank you so much!!! i think you helped me last time as well, i really appreciate it :)
oh shit it doesnt work for firefox yet, thats what i use … >:i well then, i guess java is my nr 1
wish i wasnt such a hater of java, i honestly should get over myself and just learn it
thanks for the help!
Yes, you had that white space at the bottom of your page if memory serves. Does using <details> and <summary> solve your current problem?
I’ve been in this trade for almost 25 years and I still haven’t mastered JavaScript. I know the basics and can work with frameworks like Angular and Vue because my day job often requires it, but don’t care to learn much more than that.
Incidentally, my favorite fantasy novel is Douglas Crockford’s JavaScript: The Good Parts, because here are no good parts.
It’s OK to dislike JavaScript. Without it, a lot of the surveillance, adtech, and abusive patterns pervading the commercial Web wouldn’t be possible.
it did help yes
fantasy novel called javascript u say? whats it about? thats funny tho, good parts
Sorry, I was indulging in a little joke. JavaScript: The Good Parts is actually a slim little programmer’s manual by Douglas Crockford. I have a copy. Most of what little I know about JS comes from it.