accordion-init
Pure javascript library to use without any complex libraries
version
v1.0.0
usage
Include js, css, and img files. You can use minified js files for production usages.
install the package
npm install accordion-init
Include files to use
<link rel="stylesheet" href="dist/css/accordion.min.css">
<script src="dist/js/accordion.min.js"></script>
Add HTML Template in .html file
<div class="accordion-container">
<div class="panel">
<div class="heading">Panel Title</div>
<div class="content">
<p>
Content
</p>
</div>
</div>
<div class="panel">
<div class="heading">Panel Title</div>
<div class="content">
<p>Content</p>
</div>
</div>
<div class="panel">
<div class="heading">Panel Title</div>
<div class="content">
<p>Content</p>
</div>
</div>
</div>
Create accordion in javascript
<script type="text/javascript">
var accordion = new Accordion('.accordion-container');
</script>
Add HTML Template in .html file of your angularjs
$scope.accordion = new Accordion('.accordion-container');
If you're getting your content from server and takes a delay you should $timeout function.
$timeout(function() {
$scope.accordion = new Accordion('.accordion-container');
});
API
Example
new Accordion(element, newSettings)
— element - string (obligatory), the html element you want to init as an accordion panel — newSettings - object (optional), accordion settings you want to use. Check them in the following content
Settings
Setting | Type | Default | Description |
---|---|---|---|
hideAll | boolean | false | Hide all accordion panels at first time. Default: false |
showAll | boolean | false | Hide all accordion panels at first time. Default: false |
showFirst | boolean | false | Show a panel at first time. You should identify the panel number too: panelId
|
panelId | number | null | The panel number you want to show at first time. You should set true showFirst setting too. |