折叠框Accordion

<ul class="accordion">
    <li>
        <div class="title">Clothing</div>
        <div class="content">
            <p>Content A</p>
        </div>
    </li>
    <li>
        <div class="title">Accessories</div>
        <div class="content">
            <p>Content B</p>
        </div>
    </li>
    <li>
        <div class="title">Electronics</div>
        <div class="content">
            <p>Content C</p>
        </div>
    </li>
</ul>

激活与禁用Active and Disabled

为<li>元素添加class="active"使其默认是展开的，添加class="disabled"转换为禁用项

<ul class="accordion">
    <li>
        <div class="title">Clothing</div>
        <div class="content">
            <p>Content A</p>
        </div>
    </li>
    <li class="active">
        <div class="title">Accessories</div>
        <div class="content">
            <p>Content B</p>
        </div>
    </li>
    <li class="disabled">
        <div class="title">Electronics</div>
        <div class="content">
            <p>Content C</p>
        </div>
    </li>
</ul>

移动选项Move Item

在内容项中添加data-move-item属性的元素会触发移动至设定项

<ul class="accordion">
    <li class="active">
        <div class="title">Clothing</div>
        <div class="content">
            <p>Content A</p>
            <button type="button" class="btn xs" data-move-item="first">First</button>
            <button type="button" class="btn xs" data-move-item="prev">Prev</button>
            <button type="button" class="btn xs" data-move-item="next">Next</button>
            <button type="button" class="btn xs" data-move-item="last">Last</button>
        </div>
    </li>
    <li>
        <div class="title">Accessories</div>
        <div class="content">
            <p>Content B</p>
            <button type="button" class="btn xs" data-move-item="first">First</button>
            <button type="button" class="btn xs" data-move-item="prev">Prev</button>
            <button type="button" class="btn xs" data-move-item="next">Next</button>
            <button type="button" class="btn xs" data-move-item="last">Last</button>
        </div>
    </li>
    <li>
        <div class="title">Electronics</div>
        <div class="content">
            <p>Content C</p>
            <button type="button" class="btn xs" data-move-item="first">First</button>
            <button type="button" class="btn xs" data-move-item="prev">Prev</button>
            <button type="button" class="btn xs" data-move-item="next">Next</button>
            <button type="button" class="btn xs" data-move-item="last">Last</button>
        </div>
    </li>
</ul>

自定义风格Custom Style

可以使用自定义风格工具快速创建CSS

<ul class="accordion mystyle">
    ...
</ul>