Skip to content

Instantly share code, notes, and snippets.

@bgruszka

bgruszka/accordion.html

Last active October 19, 2017 06:42
Show Gist options
  • Save bgruszka/76e9a5e13626555c0e24a0cf0cddeece to your computer and use it in GitHub Desktop.
Save bgruszka/76e9a5e13626555c0e24a0cf0cddeece to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap - JS Components
Raw
accordion.html
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Element 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Dolore incididunt consectetur eiusmod officia occaecat. Labore deserunt commodo mollit est aliquip velit duis sunt laborum sint esse. Adipisicing non enim sunt deserunt officia.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Element 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Consequat deserunt do sunt Lorem exercitation ullamco ut deserunt eu anim ea ex. Laboris sint fugiat Lorem anim sit voluptate nostrud officia. Aliqua nostrud ad fugiat consectetur cillum ea cupidatat amet.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Element 3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Id eu aliqua eu officia ullamco quis in et pariatur mollit eiusmod ea. Consequat esse fugiat mollit laboris est esse non cillum exercitation esse nostrud enim nulla id. Reprehenderit eu ullamco officia velit minim minim adipisicing deserunt. Duis nisi tempor cillum velit consequat commodo. Eu anim culpa ea deserunt. Lorem elit deserunt sit esse.
</div>
</div>
</div>
</div>
Raw
buttons.html
<button type="button" class="btn" id="loading-button" data-loading-text="saving...">Save</button>
<script>
$(function() {
$("#loading-button").click(function() {
var btn = $(this);
btn.button('loading');
setTimeout(function(){
btn.button('reset');
}, 3000)
});
});
</script>
Raw
collapse.html
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="well">
</div>
</div>
Raw
dropdown.html
<button type="button" data-toggle="dropdown">
Button dropdown
<span class="caret"></span>
</button>
<a data-target="#" href="http://example.com" data-toggle="dropdown">Link dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
Raw
modal.html
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Show modal</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Raw
popovers.html
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover"
title="Popover title" data-content="And here's some amazing content.">
Click to toggle popover
</button>
<script>
$(function () {
$('[data-toggle="popover"]').popover();
})
</script>
Raw
tooltips.html
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip text">
Tooltip on left
</button>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment