Pure javascript library to use without any complex libraries
v1.0.0
Include js, css, and img files. You can use minified js files for production usages.
npm install accordion-init
<link rel="stylesheet" href="dist/css/accordion.min.css">
<script src="dist/js/accordion.min.js"></script>
<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>
<script type="text/javascript">
var accordion = new Accordion('.accordion-container');
</script>
$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');
});
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
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. |