A handy library 3-in-one for creating responsive accordions, accordion with slider, and tabs. It’s easy to use and works well on all screen sizes, supporting touch interactions and customizable animations.
Main features:
- Accordion
- Tabs
- Touch-swipe support
- Animations
- Accordion with Slider
- Fade effect
- Carousel layout
- Responsive
- JavaScript breakpoints
The slider is also available as a Javascript plugin.
You can install it through npm
.
$ npm install accordion-slider-tabs-responsive
You can either load the minimized JS and CSS files in your HTML.
From unpkg.com:
<link rel="stylesheet" href="https://unpkg.com/accordion-slider-tabs-responsive/css/style.css"/>
<script type="text/javascript" src="https://unpkg.com/accordion-slider-tabs-responsive/src/accordionTabCustomForJS.js"></script>
Alternatively you can import the accordion's core and each add-on from the accordion-slider-tabs-responsive
package.
import accordionTabCustom from 'accordion-slider-tabs-responsive';
You can also import the CSS, either the entire code or for each individual module:
// Imports the entire CSS code
@import '~accordion-slider-tabs-responsive/css/style.css';
<div class="accordion">
<div class="parent">
<div class="section1 activeParent" for="section1">Lorem 1</div>
<div class="section2" for="section2">Lorem 2</div>
<div class="section3" for="section3">Lorem 3</div>
<div class="section4" for="section4">Lorem 4</div>
</div>
<div class="child">
<div class="section1child activeChild fade" id="section1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</div>
<div class="section2child" id="section2">tempor incididunt ut labore et dolore magna aliqua</div>
<div class="section3child" id="section3">"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</div>
<div class="section4child" id="section4">quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener( 'DOMContentLoaded', () => {
const myAccordion = {
selector: '.accordion',
animation: 'fadeIn',
resize: true,
tabs: {
class: 'accComon',
allOpen: 'false',
toggleParentClass: 'commonParAcc',
toggleChildClass: 'commonChildAcc',
responsive: {
media: 376 // Tabs visible instead of accordion for screen widths less than or equal to this value
}
},
slider: { // Configuration options for the slider functionality within the accordion
active: true,
nav: false,
touch: true,
responsive: {
0: {
items: 2
},
600: {
items: 2
},
800: {
items: 3
},
1000: {
active: false, // If false, the slider functionality is disabled for screen widths above 1000px.
}
}
}
}
accordionTabCustom(myAccordion)
});
</script>
<template>
<!--HTML here-->
</template>
<script>
import accordionTabCustom from 'accordion-slider-tabs-responsive';
import 'accordion-slider-tabs-responsive/css/accordionTabCustom.css';
export default {
mounted() {
accordionTabCustom(myAccordion)
}
};
</script>
<style scoped>
/* Your styles here */
</style>
import React, { useEffect } from 'react';
import accordionTabCustom from 'accordion-slider-tabs-responsive';
const MyComponent = () => {
useEffect(() => {
accordionTabCustom(myAccordion);
}, []);
return (
<!--HTML here-->
);
};
export default MyComponent;
Name | Default value | Description |
---|---|---|
selector | .accordion | CSS selector for the accordion element. Use # for ID. |
Animation | fadeIn | Animation effect for transitions. |
resize | true | If set to true, the component will be responsive to window resize events. |
Name | Default value | Description |
---|---|---|
Class | null | The class name applied to the accordion container. |
AllOpen | false | Determines whether all tabs sections can be open simultaneously. Set to 'false' to only allow one section to be open at a time.. |
toggleParentClass | null | Class name for the parent element . |
toggleChildClass | null | Class name for the child elements. |
Name | Default value | Description |
---|---|---|
active | true | If true, the slider functionality is enabled. |
nav | true | If true, navigation controls are included. |
touch | true | If true, touch gestures are enabled for navigation on touch devices. |
responsive | null | Configuration for responsive behavior of the slider. |
If you're looking for a free tool to create mock APIs, check out faux api. It's completely free to use.
If you found a bug or have a feature suggestion, please submit it in the Issues tracker.
If you need extensive help with implementing the slider in your project, you can contact me.
The plugin is available under the MIT license.