LearnKode

2 Example(s) of Bootstrap Collapse


Description :

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.


Bootstrap Collapse Example - 1 
<!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>
Try it » Download Example »

Output

Description :

collapsibles are used to hide or show large amount of content. To make collapsive list group, .panel-collapse collapse class is used and inside that respective div a ul component with .list-group class is used.


Bootstrap Collapse Example - 2 
<!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>Collapsible List Group</h2>
        <div class="panel-group">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
                    </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse">
                    <ul class="list-group">
                        <li class="list-group-item">HTML</li>
                        <li class="list-group-item">Javascript</li>
                        <li class="list-group-item">Angular</li>
                    </ul>
                    <div class="panel-footer">Footer</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output