# 展開/收起 的箭頭
###### tags: `實作 Style`

## 結果

## 說明
* 使用 fontAwesome 的圖
* 針對展開/收起的狀態 (aria-expanded) 處理那個箭頭圖
## Html

<div class="accordion">
    <div class="card">
        <div class="card-header">
            <h2 class="mb-0">
                <button class="btn btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true">
                    今天&nbsp;&nbsp;<i class="fas fa-chevron-right"></i>
                </button>
            </h2>
        </div>

        <div id="collapseOne" class="collapse show">
            <div class="card-body">
               Some contant ...
            </div>
        </div>
    </div>
</div>

## CSS

/* 展開時，將 fontAwesome 的圖轉向，並使用動畫 */
[aria-expanded=true] .fa-chevron-right {
    transform: rotate(90deg);
    transition: transform 350ms;
}

/* 收起時，將 fontAwesome 的圖轉回來，並使用動畫 */
[aria-expanded=false] .fa-chevron-right {
    transform: rotate(0deg);
    transition: transform 350ms;
}