PetHouse(2016)練習2

範例結果

四、Accordion折疊面板加上圖示

BS:【JavaScript】>【折疊效果Collapse】>【Accordion example】

確認項目:

BS之下新增圖示,如下圖所示

如圖結果:

利用【瀏覽器的檢查元件,確認元件】,如下圖

選取器應用(連結參考)

/*==Tabs Accordion Start==============================================*/

.panel-title>a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.panel-title>a:before {
    content: "";
    width: 40px;
    height: 40px;
    background: url(img/icon01.png) no-repeat;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
}

.panel-title>a[aria-expanded="true"]:before {
    content: "";
    width: 50px;
    height: 50px;
    background: url(img/icon03.png) no-repeat;
    background-size: contain;
}