+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Coding (https://hackforums.net/forumdisplay.php?fid=151)
+---- Forum: Web Development (https://hackforums.net/forumdisplay.php?fid=183)
+---- Thread: [Javascript] Dynamically unhide or create dropdowns (/showthread.php?tid=6076683)
Dynamically unhide or create dropdowns - bevc - May 10, 2020
This is a follow up question to a question I asked before, but more specific. I get the feeling it's probably a lot more difficult to describe than it is to understand.
So I have an html table that's got 'n' number of rows of dynamic data. For each row (and two static rows at the end), I've created a nice little chevron icon, that I want to be able to click, and show some additional (dynamic) data. For this, I've created a mixin/function in my template that takes the info and displays the data.
However, because obviously the chevron icon has the same class, I can only get this to work for one row. My function (which works) looks like this:
Code
if (reportTable) {
dropbtn.addEventListener('click', async (e) => {
document.querySelector('.dropdown-content').classList.toggle('show')
})
}I'm not sure what to do to have my template mixin available for each row. Obviously I'm going to have to loop through the DOM elements in some way, but I don't know the best way to do it.
I hate these types of open-ended problems, so if anyone could give me a hint of the 'proper' way to do it, I'd be very grateful. Thanks.