Example sharing of simple accordion effect using jQuery

This article mainly introduces jQuery to achieve a simple accordion effect in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Achieve accordion effect 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="Example sharing of simple accordion effect using jQuery" ></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="Example sharing of simple accordion effect using jQuery" ></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="Example sharing of simple accordion effect using jQuery" ></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="Example sharing of simple accordion effect using jQuery" ></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="Example sharing of simple accordion effect using jQuery" ></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="Example sharing of simple accordion effect using jQuery" ></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();
 })

Related recommendations:

Detailed examples of jQuery implementation of accordion menu, hierarchical menu, top menu, and seamless scrolling effect

Jquery implements the accordion effect of the drop-down menu. Sharing

Detailed example of pure CSS to implement the accordion effect

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