jQuery implements simple accordion effect example code

When you want to display multiple content fragments in a limited page space, the accordion effect is very useful. It can help you switch between multiple content fragments in a very user-friendly way. . With the help of the popular jQuery framework, you can achieve beautiful accordion effects with very little code, helping your website attract more users' attention. This article mainly introduces in detail the use of jQuery to achieve a simple accordion effect. The accordion effect is as shown in the figure:

html structure:

<p class="item_box box10">
  <p class="item_box_wp">
    <p class="voice_2">
      <ul>
        <li class="li1" id="li1">
          <p class="fold" style="display:none;">
            <span class="img"></span>
            <span class="txt">插件库</span>
          </p>
          <p class="unfold" style="display:block">
            <dl>
              <dt><img  src="/static/imghwm/default1.png"  data-src="images/img10.png"  class="lazy"   / alt="jQuery implements simple accordion effect example code" ></dt>
              <dd>
              </dd>
              <dd>使用语音外呼的模式将指定的语音呼入至接听人，可通过这种方式为针对性的客户提供会议通知、活动通知，并可通过API接口程序化控制呼出时间、呼出效果反馈</dd>
            </dl>
          </p>
        </li>
        <li class="li2">
          <p class="fold">
            <span class="img"></span>
            <span class="txt">点击呼叫</span>
          </p>
          <p class="unfold">
            <dl>
              <dt><img  src="/static/imghwm/default1.png"  data-src="images/img42.png"  class="lazy"   / alt="jQuery implements simple accordion effect example code" ></dt>
              <dd>
              </dd>
              <dd>通过APP应用内按钮或浏览器网页按钮点击并发起IP通话、运营商线路通话服务，减少用户交互，提升用户体验</dd>
            </dl>
          </p>
        </li>
        <li class="li3">
          <p class="fold">
            <span class="img"></span>
            <span class="txt">直拨通话</span>
          </p>
          <p class="unfold">
            <dl>
              <dt><img  src="/static/imghwm/default1.png"  data-src="images/img49.png"  class="lazy"   / alt="jQuery implements simple accordion effect example code" ></dt>
              <dd>
              </dd>
              <dd>无论是智能终端、浏览器模式，通过APP或者网页发起通话，接通方为手机用户或固话用户，常见集成至与企业服务相关的移动应用、企业客服座席。</dd>
            </dl>
          </p>
        </li>
        <li class="li4">
          <p class="fold">
            <span class="img"></span>
            <span class="txt">回拨通话</span>
          </p>
          <p class="unfold">
            <dl>
              <dt><img  src="/static/imghwm/default1.png"  data-src="images/img50.png"  class="lazy"   / alt="jQuery implements simple accordion effect example code" ></dt>
              <dd>
              </dd>
              <dd>同时通过平台方发起主叫和被叫双方，定制通话方满足不同需求的客户服务，企业服务易可根据具体业务需求为客户提供定制服务</dd>
            </dl>
          </p>
        </li>
        <li class="li5">
          <p class="fold">
            <span class="img"></span>
            <span class="txt">互联网通话</span>
          </p>
          <p class="unfold">
            <dl>
              <dt><img  src="/static/imghwm/default1.png"  data-src="images/img51.png"  class="lazy"   / alt="jQuery implements simple accordion effect example code" ></dt>
              <dd>
              </dd>
              <dd>基于互联网纯网络通话，无运营商和地域限制，拥有更清晰的语音质量，支持语音三方密钥的加密传输</dd>
            </dl>
          </p>
        </li>
        <li class="li6">
          <p class="fold">
            <span class="img"></span>
            <span class="txt">语音会议</span>
          </p>
          <p class="unfold">
            <dl>
              <dt><img  src="/static/imghwm/default1.png"  data-src="images/img52.png"  class="lazy"   / alt="jQuery implements simple accordion effect example code" ></dt>
              <dd>
              </dd>
              <dd>同时桥接多人基于IP、电话语音的会议服务，基于API控制会议时长、成员邀请、禁音、移除等功能。</dd>
            </dl>
          </p>
        </li>
      </ul>     
    </p>
  </p>
</p>

js code:

$(function(){
 //语音通知手风琴效果
 $(".voice_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);
 }
 })
 
 $(".voice_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();
 })

The above is the detailed content of jQuery implements simple accordion effect example code. For more information, please follow other related articles on the PHP Chinese website!