所需DOM结构
需要将菜单中每个标题及其内容分别包含在对应的容器中，最外层容器有唯一的ID来标示组件。

 <div class="J_TWidget section">
    <div class="ks-switchable-trigger ks-active"><h3>标题A</h3></div>
    <div class="ks-switchable-panel">
            内容AAAAA
    </div>
    <div class="ks-switchable-trigger"><h3>标题B</h3></div>
        <div class="ks-switchable-panel" style="display:none;">
            内容BBBBB
        </div>
    <div class="ks-switchable-trigger"><h3>标题C</h3></div>
        <div class="ks-switchable-panel" style="display:none;">
            内容CCCCC
        </div>
    <div class="ks-switchable-trigger last-trigger"><h3>标题D</h3></div>
        <div class="ks-switchable-panel last-panel" style="display:none;">
            内容DDDDD
     </div>
    </div>

组件调用方法

<div class=”J_TWidget”  data-widget-type=”Accordion”  data-widget-config=”{
             'triggerType': 'click',
             'multiple':true
     }”>
             <!--  code  -- >
  </div>

配置参数列表

例子

<div class="J_TWidget accordion1 section" data-widget-type="Accordion" >
<div class="ks-switchable-trigger ks-active">
    <i class="ks-icon"></i>
    <h3>宝贝A</h3>
</div>
<div class="ks-switchable-panel">
    <img src="http://img02.taobaocdn.com/bao/uploaded/i2/T1rv8UXeXHXXXKvI.Z_031645.jpg_b.jpg" />
</div>
<div class="ks-switchable-trigger">
    <i class="ks-icon"></i>
    <h3>宝贝B</h3>
</div>
<div class="ks-switchable-panel" style="display:none;">
    <img src="http://img04.taobaocdn.com/bao/uploaded/i4/T1.BxDXfFyXXcLVyE9_074027.jpg_b.jpg">
</div>
<div class="ks-switchable-trigger">
    <i class="ks-icon"></i>
    <h3>宝贝C</h3>
</div>
<div class="ks-switchable-panel" style="display:none;">
    <img src="http://img02.taobaocdn.com/bao/uploaded/i2/T1d3FKXfFbXXc5.rEU_013719.jpg_b.jpg">
</div>
<div class="ks-switchable-trigger last-trigger">
    <i class="ks-icon"></i>
    <h3>宝贝D</h3>
</div>
<div class="ks-switchable-panel last-panel" style="display:none;">
    <img src="http://img03.taobaocdn.com/bao/uploaded/i3/T1FRhQXndAXXbnWVA6_060453.jpg_b.jpg">
</div>
</div>

.accordion1 {
    height: 260px;
    border: 1px solid #ccc;
    width:416px;
    overflow:hidden;
}

.accordion1 .ks-switchable-trigger {
    padding: 3px 10px;
    cursor: pointer;
    border-right: 1px solid #ddd;
    background: #f3f3f3;
    overflow: hidden;
    width: 18px;
    height:260px;
    float:left;
}
.accordion1 .ks-switchable-trigger h3 {
    float: left;
    width: 18px;
    margin-left: 0px;
}
.accordion1 .ks-switchable-panel {
    height: 260px;
    padding: 0px;
    border-right: 1px solid #ddd;
    float:left;
    width:260px;
}
.accordion1 .ks-switchable-panel img{
    margin:20px;
}
.accordion1 .ks-icon {
    float: left;
    width: 12px;
    height: 12px;
    overflow: hidden;
    margin-top: 2px;
    font-size: 0;
    vertical-align: middle;
    background: url(http://img02.taobaocdn.com/tps/i2/T1GK07XklnXXXXXXXX-32-12.png) no-repeat 0 0;
}
.accordion1 .ks-active .ks-icon {
    background-position: -20px 0;
}
.accordion1 .last-trigger {
    border-right-width: 0
}
.accordion1 .ks-active {
    border-right-width: 1px
}
.accordion1 .last-panel {
    border-right: none
}