JQuery implements simple accordion effects and jquery implements accordion

JQuery implements simple accordion effects and jquery implements accordion

Achieve the accordion effect:

Html structure:

<Div class = "item_box box10"> <div class = "item_box_wp"> <div class = "voice_2"> <ul> <li class = "li1" id = "li1"> <div class = "fold" style = "display: none; "> <span class =" img "> </span> <span class =" txt "> plug-in library </span> </div> <div class =" unfold "style = "display: block "> <dl> <dt>  </dt> <dd> </dd> <dd> the specified voice incoming to the recipient, this method can be used to provide meeting notifications and activity notifications for targeted customers, and programmatic control of outgoing call time and outgoing call effect feedback through the API </dd> </dl> </ Div> </li> <li class = "li2"> <div class = "fold"> <span class = "img"> </span> <span class = "txt "> click call </span> </div> <div class =" unfold "> <dl> <dt>  </dt> <dd> </dd> <dd> click the in-APP button or browser webpage button to initiate an IP Call or carrier line call service, reduce user interaction, improve user experience </dd> </dl> </div> </li> <li class = "li3"> <div class = "fold"> <span class =" img "> </span> <span class =" txt "> direct call </span> </div> <div class =" unfold "> <dl> <dt>  </dt> <dd> </dd> <dd> whether in Smart terminal or browser mode, a call is initiated through an APP or webpage, the contact party is a mobile or fixed-line user. It is often integrated into mobile apps and enterprise customer service agents related to enterprise services. </Dd> </dl> </div> </li> <li class = "li4"> <div class = "fold"> <span class = "img"> </span> <span class = "txt"> callback call </span> </div> <div class = "unfold"> <dl> <dt>  </dt> <dd> </dd> <dd> both the caller and the called party are initiated through the platform, customizes customer services that the caller can meet different needs, enterprise Services can easily provide customized services to customers based on 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 = "un Fold "> <dl> <dt>  </dt> <dd> </dd> <dd> Internet-based Pure network calls, there are no carrier and region restrictions and a clearer speech quality, supports encrypted transmission of voice third-party keys </dd> </dl> </div> </li> <li class = "li6"> <div class = "fold"> <span class = "img"> </span> <span class = "txt"> speech conferencing </span> </div> <div class = "unfold"> <dl> <dt>  </dt> <dd> </dd> <dd> bridging multiple conference services based on IP addresses and telephone speech, controls the Conference duration, member invitation, audio ban, and Removal Based on APIs. </Dd> </dl> </div> </li> </ul> </div>

Js Code:

$ (Function () {// voice notification accordion effect $ (". 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 all the content of this article. I hope it will be helpful for your learning and support for helping customers.