Ting Web UI

Ting Web UI

简洁、直观、强悍、跨浏览器的前端开发框架，让web开发更迅速、简单。

可折叠块

.collapsible = "可被折叠的" = 现在开着，但能关上。通过切换 .hide 类来控制开启和关上。

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
<button type="button" class="btn btn-primary" onclick="$('#demo').toggleClass('hide')">
    切换折叠
</button>
<div id="demo" class="collapsible">
    <div class="well m-0">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
    </div>
</div>

隐藏状态

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
<div id="demo" class="collapsible hide">
    <div class="well m-0">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
    </div>
</div>

水平可折叠块

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 
<button type="button" class="btn btn-primary" onclick="$('#demo2').toggleClass('hide')">
    切换折叠
</button>
<div id="demo2" class="collapsible-horizontal">
    <div class="well m-0" style="width: 300px;">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
    </div>
</div>