Accordion 手風琴

可以摺疊式的收納條列選項。

網頁版手風琴類型

適用平台：官網、網銀

Default Hover Disabled

樣式一
  • 標題置左，箭頭置右，皆距離16px
  • 底色：#FAFAFA(gray-2)
  • 箭頭顏色：#1C1C1C(gray-11)
  • active箭頭顏色：#00a19b(企業色)
  • 底色：#F5F5F5(gray-3)
  • 內容邊界皆距離16px

樣式二
  • 標題置左，箭頭置右，皆距離16px
  • 分隔線：#d9d9d9(gray-5) 1px
  • 箭頭顏色：#1C1C1C(gray-11) 1px
  • active箭頭顏色：#00a19b(企業色)

app手風琴類型

適用平台：行動銀行

Default Active

樣式一
  • 基本
  • 外框陰影：x0,y0,blur8,#5fc7b9 20%
  • 標題：14px , font-weight：medium #1C1C1C
  • 箭頭顏色：#1C1C1C(gray-11) 1px
  • active箭頭顏色：#00a19b(企業色)

樣式二
  • 加入更多資訊的運用
  • 外框陰影：x0,y0,blur8,#5fc7b9 20%
  • 標題：14px , font-weight：medium #1C1C1C
  • 小標：12px , font-weight：regular #7C7C7C
  • 凸顯文字：font-weight：medium #00a19b(企業色)
  • 箭頭顏色：#1C1C1C(gray-11) 1px，整個Default上下置中
  • active箭頭顏色：#00a19b(企業色)

手風琴（Accordion）

SAMPLE

注意事項

HTML

                                                
<div class="faq-section">
    <div class="qa-click">注意事項
        <img src="img/ui/arrow.svg" class="arrow rotate-reset" alt="">
    </div>
    <div class="qa-answer">
        <ul>
            <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Eveniet, quas.
                Omnis, eos laudantium non temporibus quas quibusdam eligendi ab
                quia nam
                molestias impedit amet eius facilis. Dolores recusandae
                quibusdam quae?
            </li>
            <li>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Officiis fuga
                veniam cupiditate. Vitae asperiores architecto ex ad fuga
                explicabo
                voluptatum? Possimus repudiandae totam praesentium, similique
                quae veritatis
                magnam aperiam quod.
            </li>
        </ul>
    </div>
</div>
複製

CSS

                                                
.faq-section {
    background: #efefef;
    color: #1c1c1c;
    }
    .faq-section .qa-click {
    background: #efefef;
    height: auto;
    cursor: pointer;
    padding: 16px 16px;
    }
    .faq-section .qa-click img {
    color: #b7acac;
    font-size: 12px;
    margin-top: 5px;
    float: right;
    }
    .faq-section .arrow {
    position: relative;
    }
    .faq-section .qa-answer {
    display: none;
    padding: 10px 40px 10px 10px;
    margin: 5px 0;
    }
    .faq-section .qa-answer li {
    line-height: 1.5;
    text-align: justify;
    word-wrap: break-word;
    text-justify: inter-ideograph;
    word-break: normal;
    }
    .faq-section .rotate {
    transform: rotate(-180deg);
    /*transform: rotate(180deg);*/
    transition: 0.1s;
    }
    .faq-section .rotate-reset {
    transform: rotate(0deg);
    transition: 0.1s;
    }
複製

JS

                                             
$(".qa-click").click(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).next("div.qa-answer").slideToggle("fast");
    $(this).find(".arrow").toggleClass('rotate-reset');
    $(this).find(".arrow").toggleClass('rotate');
});
複製