Accordion - 手风琴

//手风琴效果

<div style="overflow:hidden;height:400px;width:948px;">

    <div class="J_TWidget" data-widget-config="{&quot;triggerType&quot;:&quot;mouse&quot;,&quot;autoplay&quot;:true,&quot;triggerCls&quot;:&quot;pan_trg&quot;,&quot;panelCls&quot;:&quot;pan_content&quot;,&quot;multiple&quot;:false,&quot;hasTriggers&quot;:true}" data-widget-type="Accordion">

        <div style="height:400px;float:left;margin-left:0px;width:950px;">

            <div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#0088FF;">

                <span> <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a> </span>

            </div>

            <div class="pan_content" style="overflow:hidden;height:400px;float:left;display:block;width:830px;">

                 <a href="" target="_blank"> <img  src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a>

            </div>

            <div class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#FF8000;">

                <span> <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a> </span>

            </div>

            <div class="pan_content" style="overflow:hidden;height:400px;float:left;display:none;width:830px;">

                 <a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a>

            </div>

            <div  class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#008000;">

                <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a>

            </div>

            <div class="pan_content" style="overflow:hidden;height:400px;float:left;display:none;width:830px;">

                 <a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a>

            </div>

            <div  class="pan_trg" style="overflow:hidden;cursor:pointer;height:400px;float:left;width:30px;background-color:#606060;">

                <a style="font-weight:normal;color:#FFFFFF;line-height:14px;">文字内容</a>

            </div>

            <div class="pan_content" style="overflow:hidden;height:400px;float:left;display:none;width:830px;">

                 <a href="" target="_blank"> <img src="//gdp.alicdn.com/imgextra/i3/743621069/T23u.9XgpaXXXXXXXX-743621069.jpg" style="height:400px;width:830px;" /></a>

            </div>

        </div>

    </div>

</div>

triggerCls    自定义值    主列表的class值

panelCls    自定义值    列表所对应的内容列表的class值

triggerType    mouse/click (默认值：click)    触发方式——

mouse：鼠标经过触发

click：鼠标点击触发

multiple    true/false (默认值：false)    是否同时支持多面板展开

hasTriggers    true/false (默认值：true)    是否设置触发点