Search code examples
javascriptbackbone.jsexpand

Javascript table row display/hide

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.