How to add and remove a class to hide and show a table row?

Question

In my current situation in my Ruby on Rails application, I am trying to make a drop-down function on each table tow to show advanced details for a server that comes from a database. My through process is to make the hidden row default to display: none; then add a viewing class when it is clicked to view it, then hide it when it is clicked again. Here is my javascript:

var hideDetails, showDetails;
showDetails = function() {
  $(this).closest('tbody').addClass('viewing');
  return false;
};
hideDetails = function() {
  $(this).closest('tbody').removeClass('viewing');
  return false;
};


$table.on('click', 'tbody.viewing', hideDetails);
$table.on('click', '.details-link', showDetails);

Then my css:

table.collapsible {
    // css for drop-down
    #hiddenRow.details {
      display: none;
      tbody.viewing {
          #hiddenRow.details {
            display: table-row;
          }
      }
    }
  }

Lastly, my HTML code:

<table id="servertable" class="paginated table collapsible table-hover sortable" 
  data-sort-name="name" data-sort-order="desc">
  <tr style="background-color: #cccccc">
    <th><%= sortable "pod_id" %></th>
    <th><%= sortable "ip"%></th>
    <th><%= sortable "status"%></th>
    <th><%= sortable "datacenter"%></th>
    <th><%= sortable "memory_used"%></th>
    <th></th>
  </tr>
  <!--A for loop to iterate through the database and put it into the table-->
  <tbody>
    <% @servers.each_with_index do |server| %>
      <tr> 
        <td><%= server.pod_id %></td>
        <td><%= server.ip %></td>
        <td><%= server.status %></td>
        <td><%= server.datacenter %></td>
        <td><%= (server.memory_used * 100).floor %>%</td>
        <td><input type="button" onclick="showDetails(); hideDetails();"></input></td>
        <tr id="hiddenRow">
          <td colspan="6">Information</td>
        </tr>
      </tr>
    <% end %>
  </tbody>
</table>

My problem is that even though in my css, I have the default display of the hidden row to be none, it is still showing up on the screen. As well as the button not functioning as well. Some help would be appreciated.

Note: There is some extra stuff in my HTML code because I have some other functions for my table such us sortable columns, just ignore that, it doesn't have to do with my question.

Answer 1

The way you are writing your css is wrong. When compiled it will end up with this declaration:

table.collapsible #hiddenRow.details{
  display: none;
}

table.collapsible #hiddenRow.details tbody.viewing #hiddenRow.details{
  display: table-row;
}

So the first declaration (table.collapsible #hiddenRow.details) will find nothing because the class .details is not set on your tr with id hiddenRow.

And the second declaration will hit nothing too, because of the obvious weird selector.

You may use this css:

table.collapsible {
    #hiddenRow {
      display: none;
    }
    tbody.viewing {
      #hiddenRow {
        display: table-row;
      }
    }
}

Also, you should avoid placing a <tr> tag inside another <tr> tag. You should use a <a> or <button> tag in place of the <input> (the onclick attribute is not necessary given that you already binded the event "click" on some html).