折叠面板

标题标题标题标题标题1
内容1
标题标题标题标题标题2
内容2
标题标题标题标题标题3
内容3
<div class="collapse"> <div class="card"> <div class="card-header"><h5>标题标题标题标题标题1</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body hide"> <div class="card-text">内容1</div> </div> </div> <div class="card"> <div class="card-header"><h5>标题标题标题标题标题2</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body hide"> <div class="card-text">内容2</div> </div> </div> <div class="card"> <div class="card-header"><h5>标题标题标题标题标题3</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body hide"> <div class="card-text">内容3</div> </div> </div> </div>

设置显示项

标题标题标题标题标题1
内容1
标题标题标题标题标题2
内容2
标题标题标题标题标题3
内容3
<div class="collapse"> <div class="card"> <div class="card-header active"><h5>标题标题标题标题标题1</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body"> <div class="card-text">内容1</div> </div> </div> <div class="card"> <div class="card-header"><h5>标题标题标题标题标题2</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body hide"> <div class="card-text">内容2</div> </div> </div> <div class="card"> <div class="card-header"><h5>标题标题标题标题标题3</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body hide"> <div class="card-text">内容3</div> </div> </div> </div>

嵌套

嵌套1
子嵌套1
子嵌套1
内容1
子嵌套2
内容2
子嵌套3
内容3
子嵌套2
内容2
子嵌套3
内容3
嵌套2
内容2
嵌套3
内容3
<div class="collapse"> <div class="card"> <div class="card-header"><h5>嵌套1</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body hide"> <div class="card-text"> <!----> <div class="collapse"> <div class="card active"> <div class="card-header"><h5>子嵌套1</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body"> <div class="card-text"> <!----> <div class="collapse"> <div class="card"> <div class="card-header"><h5>子嵌套1</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body hide"> <div class="card-text">内容1</div> </div> </div> <div class="card"> <div class="card-header"><h5>子嵌套2</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body hide"> <div class="card-text">内容2</div> </div> </div> <div class="card"> <div class="card-header"><h5>子嵌套3</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body hide"> <div class="card-text">内容3</div> </div> </div> </div> <!----> </div> </div> </div> <div class="card"> <div class="card-header"><h5>子嵌套2</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body hide"> <div class="card-text">内容2</div> </div> </div> <div class="card"> <div class="card-header"><h5>子嵌套3</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body hide"> <div class="card-text">内容3</div> </div> </div> </div> <!----> </div> </div> </div> <div class="card"> <div class="card-header"><h5>嵌套2</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body hide"> <div class="card-text">内容2</div> </div> </div> <div class="card"> <div class="card-header"><h5>嵌套3</h5><div class="card-header-more"><span class="ui-icon-right"></span></div></div> <div class="card-body hide"> <div class="card-text">内容3</div> </div> </div> </div>