Accordion Web Component is a simple and lightweight web component built with Stencil.js.
-
Install the component using NPM:
npm i stencil-sass-accordion
-
Include the script tag in your HTML file:
<script type="module" src="/node_modules/stencil-sass-accordion/dist/stencil-sass-accordion/stencil-sass-accordion.esm.js"></script>
Alternatively, include the component directly from a CDN:
<script type="module" src="https://cdn.jsdelivr.net/npm/stencil-sass-accordion@0.0.5/dist/stencil-sass-accordion/stencil-sass-accordion.esm.js"></script>After importing the component, integrate it into your HTML file:
<kh-accordion button-title="Button Title" panel-text="Panel Text"></kh-accordion>Easily customize the accordion by updating the button-title and panel-text attributes:
<kh-accordion button-title="New Title" panel-text="New Text"></kh-accordion>For a quick start, check out the example below using CDN:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="module" src="https://cdn.jsdelivr.net/npm/stencil-sass-accordion@0.0.5/dist/stencil-sass-accordion/stencil-sass-accordion.esm.js"></script>
<title>Accordion Example</title>
</head>
<body>
<kh-accordion button-title="Sample Title" panel-text="Sample Text"></kh-accordion>
</body>
</html>