Welcome to %s forums

<No. 1 Community for developers, by developers/>

Login Register

How to create your own accordion?

Get support on JavaScript,jQuery, AJAX and other related technology.
Post Reply
admin
Site Admin
Posts: 45

How to create your own accordion?

Post by admin » Thu Aug 22, 2019 2:53 pm

HTML:

Code: Select all

<dl class="accordion">

<dt><a href="">Panel 1</a></dt>
<dd>Dummy text for panel 1</dd>

<dt><a href="">Panel 2</a></dt>
<dd>Dummy text for pane2 </dd>

<dt><a href="">Panel 3</a></dt>
<dd>Dummy text for panel 3 </dd>

</dl>
jQuery:

Code: Select all

(function($) {
    
  var allPanels = $('.accordion > dd').hide();
    
  $('.accordion > dt > a').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);

Post Reply