brave
Version:
Old school web application library
84 lines (82 loc) • 2.3 kB
HTML
<html>
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet">
<style>
[my-accordion] .panel .panel-body {
display: none;
}
[my-accordion] .panel.open .panel-body {
display: block;
}
</style>
<body>
<div my-accordion="numbers">
<div class="panel panel-info open">
<div class="panel-heading">One.</div>
<div class="panel-body">One. Body</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Two.</div>
<div class="panel-body">Two. Body</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">Three.</div>
<div class="panel-body">Three. Body</div>
</div>
</div>
<hr>
<div my-accordion="letters">
<div class="panel panel-info">
<div class="panel-heading">A.</div>
<div class="panel-body">A. Body</div>
</div>
<div class="panel panel-info open">
<div class="panel-heading">B.</div>
<div class="panel-body">B. Body</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">C.</div>
<div class="panel-body">C. Body</div>
</div>
</div>
<script src="../dist/brave.js"></script>
<script>
Brave.register({
'my-accordion': {
initialize: function () {
this.single = this.data.single
this.panels = this.el.querySelectorAll('.panel')
},
on: {
'click:.panel-heading': function (e) {
var panel = e.target.parentNode
if (this.single) {
if (panel.classList.contains('open')) {
panel.classList.remove('open')
} else {
for (var i = 0; i < this.panels.length; i++) {
if (this.panels[i] === panel) {
panel.classList.add('open')
} else {
this.panels[i].classList.remove('open')
}
}
}
} else {
panel.classList.toggle('open')
}
}
}
}
})
Brave.scan(document.body, {
numbers: {
single: true
},
letters: {
single: false
}
})
</script>
</body>
</html>