Data target from many parents to many childs
I have the following case:
https://gyazo.com/a73bdc5b049ac8d361a291c24be6334f
I have many parents, which has many childs. Right know the JS targets a parent, and that parent targets a specific child, but I have that for each one of them (so 12 functions), which is not... very well DRY and all of that.
I need somebody to help me really, to make it this way:
1) I click on Parent 1 and highlight it, this displays Child 1.
2) If I click again on said Parent, the Child will hide.
3) If I click on "x" inside said Child, it hides, and un-highlight's the Parent.
Right now, 3 doesn't happen, and 1 and 2 are just copy-pasted functions, all targeted to one ID specifically.
As I'm yet pretty noob with JS, I request help ðŸ˜
Gyazo
Gyazo
5 Replies
I made this code-pen example if anyone wants to play around and try to pull it off:
https://codepen.io/myntsu/pen/RwyOKGK
It's quite close, minus media queries, decoration, etc.
In vanilla JS, you can put the id of the child on an data-attribute on the parent and onClick check if that id is in the container, if so remove* it, if not add* it. So you would only need one onclick function, that uses the event.target.
*) if you "remove" it via display: none, make sure to check for that.
I put it in a pen: https://codepen.io/Wolle74/pen/xxjegQO?editors=1111
But I still have issues with it ðŸ˜
I don't know how to not repeat myself, and I can't find a case-scenario for what I'm trying to do. I have search exhaustively on the internet and haven't find a good sample that I could learn from.
Well, I went with a lot of DRY, and jQuery. I have sinned badly, but I couldn't find any other solution.
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View