CSS3 transition working intermittently?

Question

I have a Bootstrap table with a button in the first column of each row with a font awesome down caret. When you click this button it expands and pushes the content below it down and exposes hidden information (bootstrap accordion). I am using a CSS transition to rotate this down caret to spin and face up making it so the user knows they can click to reverse the action and hide the content.

This transition only works some of the time. Sometimes it spins the icon right away, sometimes it doesn't spin at all, then after a few clicks of other ones another one will suddenly work when clicked. All on the same page load or refresh. It's hit or miss with each click. I can't seem to figure out what I am doing wrong here or if it's just a bug because I have multiple on the same page? (I have multiple because this transition will be part of each result on a search result page).

The CSS

.rotate{
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}

.rotate.down{
    -ms-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}

The HTML

<tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
<td class="ml10">
<button class="btn btn-primary btn-xs btn-block"><span class="fa fa-chevron-down rotate"></span></button>
</td>
<td>Content</td>
<td><a href="#">Content</a></td>
<td><a href="#">Content</a></td>
<td><a href="#">Content</a></td>
<td> Content</td>
</tr>

The Jquery

$(".rotate").click(function(){
$(this).toggleClass("down"); 
});

Answer 1

It's because you have set up the span ( the icon) as the toggle, not the button. Unless you click on the span itself, not toggle will take place. Here is a jsfiddle with the button as a toggle. I'm sure there are other ways to do it as well.

$(".btn").on('click',function(){
$(this).children('.rotate').toggleClass("down"); 
});