Richard Bailey Richard Bailey - 10 days ago 5
CSS Question

Show correct chevron on data-toggle - css only

I am making use of the following css to toggle a chervon, but the problem is at start-up the wrong chevron is display. As soon as you start the toggle, it works. Not sure what I'm doing wrong?

CSS:

.arrow-toggle .fa-chevron-down,
.arrow-toggle.collapsed .fa-chevron-right {
display: inline-block;
}

.arrow-toggle.collapsed .fa-chevron-down,
.arrow-toggle .fa-chevron-right {
display: none;
}


HTML:

<tr ng-repeat-start="foo in vm.bar track by $index"
data-toggle="collapse" data-target="#task{{$index}}"
class="arrow-toggle">
<td>
<i class="fa fa-chevron-right" aria-hidden="true"></i>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</td>
</tr>


See the Pen Chevron Toggle Issue by Richard (@Programm3r) on CodePen.



Thanks in advance!

XYZ XYZ
Answer

add class collapsed to the tr initially

<tr ng-repeat-start="foo in vm.bar track by $index"
    data-toggle="collapse" data-target="#task{{$index}}"
    class="arrow-toggle collapsed">
    <td>
        <i class="fa fa-chevron-right" aria-hidden="true"></i>
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </td>
   </tr>

The .fa-chevron-down is hidden if the tr has the class .collapsed

.arrow-toggle.collapsed .fa-chevron-down,
.arrow-toggle .fa-chevron-right {
    display: none;
}

http://codepen.io/anon/pen/LbWwdN

Comments