Accordion with jQuery

28.04.19

An accordion on the site on the site has to be used very often. The easiest option is to write in several lines based on slideToogle(). This option is no exception. For convenience, it was wrapped in a jQuery plugin.

The jQuery library must be linked above the accordion script.

HTML

<!--Installation-->
<head>
     <script src="/jquery.js"></script>
     <script src="/simpleAccordion.js"></script>   
</head>
<!-- //-->
<div class="accordion-block">
     <div class="title-acc">
          Caption 1
     </div>
     <div class="content-acc">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius  quisquam excepturi eaque a soluta laborum delectus in culpa! Necessitatibus ea obcaecati.  
     </div>
      <div class="title-acc">
          Caption 2
     </div>
     <div class="content-acc">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius quisquam excepturi eaque a soluta laborum delectus in culpa! Necessitatibus ea obcaecati. 
     </div>
      <div class="title-acc">
          Caption 3
     </div>
     <div class="content-acc">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius quisquam excepturi eaque a soluta laborum delectus in culpa! Necessitatibus ea obcaecati. 
     </div>
</div>

CSS

.content-acc{
     display: none; /*hide contents*/
}
.content-acc.active{
     display: block; /*display active contents*/
}

Initialization

$(function(){

   $('.accordion-block').simpleAccordion();
     
});

You can also use other selectors instead of default ones. And it is possible to call a callback when clicked. You can change the speed of the animation using the speed parameter. Default speed 400.

Initialization with options

$(function(){
 
   $('.accordion-block').simpleAccordion({
 
     'title' : '.othertitle',
     'content': '.othercontent', 
     'cb': callbackFunctionName, 
     'speed': 500 
 
   });
      
});

Plugin

(function($){
 
    $.fn.simpleAccordion = function(options){
 
        var settings = $.extend({
            'title' : '.title-acc',
            'content': '.content-acc',
            'cb': '',
            'speed': 400
        }, options);
 
        var acctitle = $(this).find(settings.title);
 
        acctitle.click(function(){
            if(!$(this).next().is(':visible')) {
                $(settings.content).slideUp(settings.speed);
                $(settings.title).removeClass('active');
            }
            $(this).next().stop().slideToggle(settings.speed);
            $(this).toggleClass('active');
            if(settings.cb){
                settings.cb();
            }
        });
    };
 
})(jQuery);

Demo

Caption 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius quisquam excepturi eaque a soluta laborum delectus in culpa! Necessitatibus ea obcaecati, ipsa fuga autem perferendis voluptas nesciunt quasi excepturi.
Caption 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius quisquam excepturi eaque a soluta laborum delectus in culpa! Necessitatibus ea obcaecati, ipsa fuga autem perferendis voluptas nesciunt quasi excepturi.
Caption 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius quisquam excepturi eaque a soluta laborum delectus in culpa! Necessitatibus ea obcaecati, ipsa fuga autem perferendis voluptas nesciunt quasi excepturi.
blog comments powered by Disqus