I have a Bootstrap accordion table that shows a hidden table with content whenever someone clicks anywhere on the row. The hidden table is then a different color (#DDD). What I'm trying to achieve is have the actual row changing the color too when clicked and opened and changing back to white when it is closed.

How would I achieve that?

Here is the HTML markup I currently have:

<table class="table">

<thead>
<th class="">First</th>
<th class="">Last</th>
<th class="">Phone</th>
</thead>

<tbody>

<tr data-toggle="collapse" data-target="#001" class="accordion-toggle">
<td class="">Bill</td>
<td class="">Clinton</td>
<td class="">000-000-0000</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="001">More details about Bill Clinton here.</div> 
</td>
</tr>

<tr data-toggle="collapse" data-target="#002" class="accordion-toggle">
<td class="">Abraham</td>
<td class="">Lincoln</td>
<td class="">111-111-1111</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="002">More details about Abraham Lincoln here.</div> 
</td>
</tr>

</tbody>
</table>

and the CSS:

.hiddentablerow{
    padding: 0px 0px !important;
    background-color: #DDD;
}

And of course a fiddle: /

I have a Bootstrap accordion table that shows a hidden table with content whenever someone clicks anywhere on the row. The hidden table is then a different color (#DDD). What I'm trying to achieve is have the actual row changing the color too when clicked and opened and changing back to white when it is closed.

How would I achieve that?

Here is the HTML markup I currently have:

<table class="table">

<thead>
<th class="">First</th>
<th class="">Last</th>
<th class="">Phone</th>
</thead>

<tbody>

<tr data-toggle="collapse" data-target="#001" class="accordion-toggle">
<td class="">Bill</td>
<td class="">Clinton</td>
<td class="">000-000-0000</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="001">More details about Bill Clinton here.</div> 
</td>
</tr>

<tr data-toggle="collapse" data-target="#002" class="accordion-toggle">
<td class="">Abraham</td>
<td class="">Lincoln</td>
<td class="">111-111-1111</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="002">More details about Abraham Lincoln here.</div> 
</td>
</tr>

</tbody>
</table>

and the CSS:

.hiddentablerow{
    padding: 0px 0px !important;
    background-color: #DDD;
}

And of course a fiddle: http://jsfiddle/kxtk6w4y/

• javascript
• jquery
• html
• css
• twitter-bootstrap

1 Answer 1

You can use jQuery to fire an onClick for the row clicked that toggles the hidden row.

Fiddle

And here's the snippet I created for it:

$('.accordion-toggle').click(function() {
    if ( $(this).attr('aria-expanded') == "true" ) {
        $(this).children().css('background-color', '#FFF');
    } else {
        $(this).children().css('background-color', '#DDD');
    }
});