collapsibles are used to hide or show large amount of content..Collapse class is used to hide or show the content of the div with id #demo and the div with id #upperCollapseContent is hidden and shown using jquery.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap Collapse Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapse</h2>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Click me</button>
<div id="demo" class="collapse">
In this example collapse class is used at data-toggle and in data</br> target the
id of the target div is given which we want to open.</br>At the targeted div
the class collapse is also given.
</div>
</div>
</br>
<button style="margin-left:80px" class="btn btn-warning" id="data-target-btn" type="button" aria-controls="collapseExample">
Click On To Toggle
</button>
<div class="collapse" id="upperCollapseContent">
<div class="well">
<p>
Hence it is that is almost a definition of a gentleman to say he is one who never inflicts pain. This description is both refined and, as far as it goes, accurate. He is mainly occupied in merely removing the obstacles which hinder the free and unembarrassed action of those about him; and he concurs with their movements rather than takes the initiative himself. His benefits may be considered a parallel to what are called comforts or conveniences in arrangements of a personal nature, like an easy chair or a good fire, which do their part in dispelling cold and fatigue, though nature provides both means of rest and animal heat without them. - J.E. Newman.
</p>
</div>
</div>
</body>
</html>
<script>
$(function () {
$("#data-target-btn").click(function () {
$("#upperCollapseContent").collapse("toggle");
})
});
</script>
