Plugin de acordeón fácil de acceder en JavaScript puro-acordeón de tejón

Vista prévia

Descripción

Badger Accordion es un plugin de acordeón JavaScript simple, eficaz y accesible que utiliza animaciones CSS3 para los efectos de expansión/colapso suaves.

Funcionamiento

Instala e importa el acordeón de Badger en tu proyecto.

$ npm install badger-accordion --save

O puedes incluir el JavaScript y la hoja de estilo del acordeón de Badger en tu página web.

<link rel="stylesheet" href="css/badger-accordion.css">
<script src="js/badger-accordion.js""></script>

El ejemplo de estructura HTML para el acordeón.

<dl class="badger-accordion js-badger-accordion">

<dt>



<button class="badger-accordion__header js-badger-accordion-header">





<div class="badger-accordion__header-title">







Accordion Header





</div>





<div class="badger-accordion__header-icon">





</div>



</button>

</dt>

<dd class="badger-accordion__panel js-badger-accordion-panel">



<div class="badger-accordion__panel-inner text-module js-badger-accordion-panel-inner">





<p>







Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





</p>





<p>







Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





</p>





<p>







Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





</p>



</div>

</dd>

<dt>



<button class="badger-accordion__header js-badger-accordion-header">





<div class="badger-accordion__header-title">







Accordion Header





</div>





<div class="badger-accordion__header-icon">





</div>



</button>

</dt>

<dd class="badger-accordion__panel js-badger-accordion-panel">



<div class="badger-accordion__panel-inner text-module js-badger-accordion-panel-inner">





<p>







Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





</p>





<p>







Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





</p>





<p>







Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.





</p>



</div>

</dd>
</dl>

Crea una nueva instancia de acordeón de Badger y listo.

const myAccordion = new BadgerAccordion('.js-badger-accordion');

Opciones de configuración predeterminadas del acordeón.

const myAccordion = new BadgerAccordion('.js-badger-accordion',{



headerClass: '.js-badger-accordion-header',



panelClass: '.js-badger-accordion-panel',



panelInnerClass: '.js-badger-accordion-panel-inner',



hiddenClass:
'is-hidden',



initalisedClass: 'badger-accordion--initalised',



headerDataAttr: 'data-badger-accordion-header-id',



openMultiplePanels: false,



openHeadersOnLoad: [],



headerOpenLabel: 'Open accordion panel',



headerCloseLabel: 'Close accordion panel',



roles: true // Controls setting presentation role on the container element & region on the panel. By using a boolean value you will set both attributes. By settings this as an object you will be explicitly setting only that role. Any roles not included in the object will not be set. In the example above only the region role will be set.
});

API methods.

// gets current state
// Arguments: headerId/s - array
myAccordion.getState()

// opens a specific accordion panel
myAccordion.open(headerIndex)

// closes a specific accordion panel
myAccordion.close(headerIndex)

// toggles accordion panels
 // animationAction is either open or closed.
myAccordion.togglePanel(animationAction, headerIndex)

// opens all accordion panel
myAccordion.openAll()

// closes all accordion panel
myAccordion.closeAll()

// calculates and sets all panels height
 calculateAllPanelsHeight()



// calculates and sets a single panels height
calculatePanelHeight()

Registro de cambios

v1.2.0 (2019-02-09)

• Se ha creado la capacidad de tener acordeones anidados.

v1.1.4 (2018-12-08)

• Actualice & corrección

v1.1.3 (2018-12-02)

• Actualice & corrección

v1.1.2 (2018-08-12)

• Actualice & corrección

v1.1.1 (2018-06-17)

• Actualice & corrección