Responsive tabs-to-accordion script without jQuery, written using pure JavaScript
Dmytro Kudleichuk
See demo here and sources here
Load stylesheet and script file
<html>
<head>
...
<link rel="stylesheet" type="text/css" href="path/to/vanilla.tabs.css">
</head>
<body>
...
<!--
Before closing </body>
-->
<script src="path/to/vanilla.tabs.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
new VanillaTabs({
'selector': '.tabs', // default is ".tabs"
'type': 'horizontal', // can be horizontal / vertical / accordion
'responsiveBreak': 840, // tabs become accordion on this device width
'activeIndex' : 0 // active tab index (starts from 0 ). Can be -1 for accordions.
});
});
</script>
</body>
</html>
<ul class="tabs">
<li data-title="First tab">Put here any content for a first tab</li>
<li data-title="Second tab">Put here any content for a second tab</li>
<li data-title="Third tab">Put here any content for a third tab</li>
</ul>
Feel free to use it on your projects without any restrictions