Javascript table row display/hide

Question

I have created a table using Javascript/Backbone. While using a template to display the rows I have one visible row and one hidden from the start. When I click on a specific table I want it to 'expand' by showing the hidden row placed under the visible one. I'm also using a loop to create the table so all the rows have the same class and id. So far I used this to expand and collapse the rows:

expandRow: function() {
    if (document.getElementById('hiddenText').style.display == 'none' ) {
        document.getElementById('hiddenText').style.display = '';
    }
    else if (document.getElementById('hiddenText').style.display == '') {
        document.getElementById('hiddenText').style.display = 'none';
    }

However this solution only opens and closes the same table row (the top one) no matter which row I click on. I need help to find a solution to only expand/collapse the specific row I click on.

Solution

IDs must be unique to the page. If they are not unique, then your JavaScript will just select the first occurence, in this case, the first row with "hiddenText" as the ID.

You will need to select your desired row via some sort of reference. So, perhaps in the loop that creates the table you can include an incremental index in the row ids, then select the appropriate row via that method.

Comments

[Mati Kowa]

Thank you for your answer Deeptechtons! I've tried to implement it the way you described but without any luck. Could you possibly take a look at the full javascript code and show me the proper way how to implement your method? If so you will find the full js here: jsfiddle.net/6xtj5

[Deeptechtons]

@MatiKowa Don't know if something is wrong on my side by the Fiddle does not run and results in Js errors