jQuery accordion special effects
Keywords:
JQuery
Mobile
network
<div class="container">
<div class="container_box">
<div class="box_2">
<ul>
<li class="li1" id="li1">
<div class="fold" style="display:none;">
<span class="img"></span>
</div>
<div class="unfold" style="display:block">
<dl>
<dt><img src="../Image/AccordionImg/img10.png" /></dt>
<dd>
</dd>
<dd> Uses voice outcall mode to call the designated voice to the receiver, which can provide meeting notification and activity notification for targeted customers, and programmatically control the outgoing time and outgoing effect feedback through API interface </dd>.
</dl>
</div>
</li>
<li class="li2">
<div class="fold">
<span class="img"></span>
<span class="txt"> click on the call</span>
</div>
<div class="unfold">
<dl>
<dt><img src="../Image/AccordionImg/img42.png" /></dt>
<dd>
<b> Click on the call</b>
</dd>
<dd> User interaction is reduced and user experience </dd> is enhanced by clicking and launching IP calls and operator line calls through APP application button or browser page button.
</dl>
</div>
</li>
<li class="li3">
<div class="fold">
<span class="img"></span>
<span class="txt">direct dial call</span>
</div>
<div class="unfold">
<dl>
<dt><img src="../Image/AccordionImg/img49.png" /></dt>
<dd>
<b> Direct dialing</b>
</dd>
Whether in smart terminal or browser mode, call is initiated through APP or web pages, and the connecting party is mobile or fixed-line users. It is commonly integrated into mobile applications and enterprise customer service seats related to enterprise services. </dd>
</dl>
</div>
</li>
<li class="li4">
<div class="fold">
<span class="img"></span>
<span class="txt">Callback</span>
</div>
<div class="unfold">
<dl>
<dt><img src="../Image/AccordionImg/img50.png" /></dt>
<dd>
<b> Callback call</b>
</dd>
<dd> At the same time, both the caller and the callee are initiated through the platform to customize the caller's customer service to meet different needs. Enterprise services can easily provide customized services for customers according to specific business needs </dd>.
</dl>
</div>
</li>
<li class="li5">
<div class="fold">
<span class="img"></span>
<span class="txt">Internet calls</span>
</div>
<div class="unfold">
<dl>
<dt><img src="../Image/AccordionImg/img51.png" /></dt>
<dd>
<b> Internet Call</b>
</dd>
<dd> Internet-based pure network calls, without operators and geographical constraints, have clearer voice quality, support the encryption transmission of voice tripartite keys </dd>.
</dl>
</div>
</li>
<li class="li6">
<div class="fold">
<span class="img"></span>
<span class="txt">voice conference</span>
</div>
<div class="unfold">
<dl>
<dt><img src="../Image/AccordionImg/img52.png" /></dt>
<dd>
<b> Voice conference</b>
</dd>
At the same time, <dd> bridges multi-person conference services based on IP and telephone voice, and controls conference duration, invitation of members, voice-forbidden, removal and other functions based on API. </dd>
</dl>
</div>
</li>
</ul>
</div>
</div>
</div>*{ margin:0; padding:0; list-style:none}
.container { background: #404344; padding: 0px; height: 610px;}
.box_2 { width: 1180px; position: relative; left: 50%; margin-left: -590px;}
.box_2 ul li { float: left; display: inline; height: 610px; color: #fff; cursor: pointer; position: relative;}
.box_2 ul li.li1 { background: #4a9ebd}
.box_2 ul li.li2 { background: #4abdb9}
.box_2 ul li.li3 { background: #90d73d}
.box_2 ul li.li4 { background: #e3d02c}
.box_2 ul li.li5 { background: #e37e2c}
.box_2 ul li.li6 { background: #cc428d}
.box_2 .fold { width: 100px; height: 100%; text-align: center; position: absolute; top: 0px; left: 0px;}
.box_2 .fold .img { display: block; background: url("../Image/AccordionImg/icon.png") 0 0 no-repeat; margin-bottom: 20px; margin-top: 236px;}
.box_2 .li1 .fold .img { background-position: -482px -181px; width: 56px; height: 113px; margin: 236px 20px 20px 20px;}
.box_2 .li2 .fold .img { background-position: 0 -417px; width: 51px; height: 138px; margin: 236px 25px 28px 25px;}
.box_2 .li3 .fold .img { background-position: -64px -413px; width: 54px; height: 142px; margin: 239px 23px 20px 23px;}
.box_2 .li4 .fold .img { background-position: -136px -204px; width: 76px; height: 96px; margin: 276px 12px 26px 12px;}
.box_2 .li5 .fold .img { background-position: -141px -420px; width: 53px; height: 116px; margin: 259px 23px 24px 23px;}
.box_2 .li6 .fold .img { background-position: -172px -306px; width: 54px; height: 104px; margin: 270px 23px 25px 23px;}
.box_2 .fold .txt { font-size: 24px; display: block; width: 25px; font-weight: normal; margin: 0px 38px; line-height: 25px;}
.box_2 .unfold { width: 680px; height: 100%; display: none; position: absolute; top: 0px; left: 0px;}
.box_2 .unfold dl { margin: 50px 60px 0px 60px;}
.box_2 .unfold dt { width: 100%; text-align: center; margin-bottom: 40px;}
.box_2 .unfold dd { font-size: 18px; line-height: 35px;}
.box_2 .unfold dd b { font-size: 30px; font-weight: normal;}
.box_2 .unfold dd b a { font-size: 14px; display: inline-block; color: #fff; margin-left: 40px;}
<script src="../js/jquery-1.11.0.min.js"></script>
<script>
$(function(){
//Voice notification accordion effect
$(".box_2 ul li").each(function(){
var fold = $(this).find(".fold");
var unfold = $(this).find(".unfold");
if(fold.is(":hidden")){
$(this).width(680);
}else{
$(this).width(100);
}
});
$(".box_2 ul li").click(function(){
var li_index = $(this).index();
$(this).animate({width:680},200);
$(this).find(".unfold").show();
$(this).find(".fold").hide();
$(this).siblings().animate({width:100},200);
$(this).siblings().find(".unfold").hide();
$(this).siblings().find(".fold").show();
});
})
</script>
Note: Higher version of jQuery plug-in cannot be used when referring to jQuery. Higher version of jQuery has API upgrade problems.
Posted by gumby51 on Thu, 09 May 2019 09:44:38 -0700