Acordeón con jQuery

28.04.19

Un acordeón en el sitio en el sitio tiene que ser usado muy a menudo. La opción más fácil es escribir en varias líneas basadas en slideToogle(). Esta opción no es una excepción. Para mayor comodidad, se envolvió en un complemento jQuery.

La biblioteca jQuery debe estar vinculada por encima del script de acordeón.

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*/
}

Inicialización

$(function(){

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

También puede utilizar otros selectores en lugar de los predeterminados. Y es posible llamar a una devolución de llamada cuando se hace clic. Puede cambiar la velocidad de la animación utilizando el parámetro de velocidad. Velocidad por defecto 400.

Inicialización con opciones

$(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