Accordion Example 3:

在线客服

Dom code:

<div id="accordion3" class="Auto_Widget" data-widget-type="Accordion" data-widget-config="{
		triggers:'.switchable-trigger',
		panel:'.switchable-panel',
		onlyTrigger:true	
	}">      
		<div class="title">
		    <h3 class="switchable-trigger selected">在线客服</h3>
		</div>
		<ul class="switchable-panel ">
			<li>客服01</li>
			<li>客服02</li>
			<!--  省去N个客服  -->
			<li>客服33</li>
			<li>客服34</li>
			<li>客服35</li>
			<li>客服36</li>
		</ul>
</div>

CSS code:

#accordion3 .switchable-trigger{
		width:17px;
		height:84px;
		background:url(assets/icon.gif) no-repeat 0 -30px;
		text-align:center;
		padding:20px 5px 10px
		;cursor:pointer;
	}
#accordion3 .title .selected{
		width:150px;
		height:23px;
		line-height:23px;
		padding:0;
		background-position:0 0;
	}
#accordion3 .switchable-panel{
		width:148px;
		border:1px solid #990000;
		border-top:none;
	}
#accordion3 .switchable-panel li{text-align:center;}