/    Sign up×
Community /Pin to ProfileBookmark

Toggle visibility of

Hello,
I do have a problem that I can’t solve by myself. I really hope someone here is willing to help me.

I have lots of visible **parent** table rows `<tr class=”parent”>`.
Under each parent there is a **child** table row `<tr class=”child”>` that is hidden by default.

I want a solution where the whole parent row acts as a button to either hide or show the child row.
Also while the child row is shown, a class should be added to the parent row.
The class should get removed after hiding the child row again.
It would be wonderful if showing/hiding had a smooth animation.

This is almost the only thing on the whole website that requires JavaScript.
So I’d prefer a solution in vanilla JS instead of including a framework like JQuery.

However I am not familiar with JavaScript at all.
I know I know… I really need to get into it. Recently I started learning Python and I really felled in love with programming. JavaScript is definitely the next thing on my ‘To Learn’ list. But for now I really just need a solution to this single specific problem… And none of the solutions I found online really helped me.

I’d be very very thankful if anyone here would take the time to provide me a solution to this.
Let me know if there is anything I could do to return the favour.

I’ve made a JSFiddle: https://jsfiddle.net/L4vknsr2/1/

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumMay 22.2020 — Some Javascript does the main job:

https://jsfiddle.net/Sempervivum/q497swtx/2/

It's easy to toggle a class at the parent row either.
Copy linkTweet thisAlerts:
@BananaJoeauthorMay 22.2020 — Well... thank you very much!

This solution is absolutely beautiful.

It works exactly as intended and it is much less code than other 'solutions' I've found.

Sorry for bothering but if you could tell me how to also toggle the class of the parent row I'd be happy for today. :P
Copy linkTweet thisAlerts:
@SempervivumMay 22.2020 — That's easy, I've added a color in order to make the class visible:

https://jsfiddle.net/Sempervivum/q497swtx/3/
Copy linkTweet thisAlerts:
@BananaJoeauthorMay 22.2020 — **Super awesome!** Thank you so much. :)
Copy linkTweet thisAlerts:
@SempervivumMay 22.2020 — Animation grew a bit more complex as a table row or cell doesn't accept setting it's height. Additional divs were necessary:

https://jsfiddle.net/Sempervivum/dnt02ke5/1/
×

Success!

Help @BananaJoe spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...