jquery realizes simple Accordion Menu effect Example _jquery

This article illustrates the method of jquery to realize simple accordion menu effect. Share to everyone for your reference. The implementation methods are as follows:

(function ($) {
 var allpanels = $ ('. Accordion > dd '). Hide ();
 $ ('. Accordion > dt > A '). Click (function () {
  allpanels.slideup ();
  $ (this). Parent (). Next (). Slidedown ();
  return false;
 });
(JQuery);

HTML code:

<DL class= "accordion" >
<dt><a href= "" >panel 1</a></dt>
<dd> Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd> <dt><a, href=
"" >panel 2</a></dt>
<dd>donec nec justo eget felis-facilisis. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>
<dt><a href= "" >panel
3</a></dt> <dd>lorem ipsum dolor sit amet, consectetuer adipiscing. Phasellus hendrerit. Pellentesque aliquet nibh nec Urna. In Nisi neque, Aliquet vel, dapibus id, Mattis vel, nisi. Sed pretium, Ligula sollicitudin laoreet Viverra, Tortor libero, Sodales Leo, Eget Blandit, nunc tortor, EU nibh. Nullam mollis. Ut Justo. Suspendisse potenti.</dd>
</dl>

Scss section:

/* Sorry If you don ' t use SASS. Should be pretty easy to convert. * *
accordion {
  margin:50px; 
  DT, DD {
   padding:10px;
   border:1px solid black;
   border-bottom:0;
   &:last-of-type {
    border-bottom:1px solid black;
   }
   a {
    display:block;
    Color:black;
    Font-weight:bold
   }
  }
 dd {
   border-top:0;
   font-size:12px;
   &:last-of-type {
    border-top:1px solid white;
    position:relative;
    Top: -1px
   }}

I hope this article will help you with your jquery programming.