Collapse

Collapsible are useful when you want to hide and show large amount of content.

  • collapse - indicates a collapsible (content that will be shown or hidden ) element
  • ( Attribute ) data-toggle="collapse" - To control (show/hide) the collapsible content

Source Code 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutor Joes</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
    <style>
        hr {
            margin-top: 15px;
            margin-bottom: 15px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h4>Collapse</h4>
                <button class="btn btn-success" data-toggle="collapse" data-target="#box">Click Me</button>
                <div id="box" class="collapse" style="background-color: teal;color:white;padding: 5px;">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate delectus unde modi reprehenderit voluptatem nobis non ipsa fuga eligendi natus tenetur, assumenda cumque omnis officiis architecto debitis nisi ullam aspernatur, eum voluptates mollitia
                        dolores saepe ipsam inventore. Reprehenderit inventore iure hic laboriosam ipsam quae, perspiciatis soluta cupiditate officia cumque rem. Aut saepe necessitatibus soluta perferendis nisi voluptate optio maiores voluptas? Facilis
                        corporis totam tempora, qui tempore neque ipsam cumque velit? Ipsam, minus quam. Velit dolore unde repudiandae, similique recusandae at vitae quaerat omnis aperiam! Nihil placeat quam odit rerum totam dolor officiis repellendus
                        quo, sequi voluptate eligendi? Reprehenderit quod quos voluptate velit quia ex sit dolore reiciendis maxime architecto cumque quidem nesciunt laudantium veritatis, quasi hic. Mollitia molestiae voluptatibus quam incidunt accusamus
                        assumenda ea nesciunt nobis, alias, voluptate odit ex natus rerum. Similique laborum corporis eius dignissimos qui, voluptate esse quaerat dolores blanditiis a, at itaque inventore delectus cum laudantium illum nemo dolorum accusamus.
                        Cupiditate vitae aspernatur totam, delectus magni adipisci neque fugiat ex dolor obcaecati omnis, aliquid repellat explicabo harum minus! Voluptatum omnis hic eaque perferendis a cumque molestiae. Voluptate, sed. Totam quo atque
                        fugit impedit laborum ipsam! Et cumque excepturi quis perferendis vitae. Temporibus facilis harum minus impedit?
                    </p>
                </div>
                <hr>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a href="#box2" data-toggle="collapse">Heading</a>
                    </div>
                    <div id="box2" class="panel-collapse collapse">
                        <div class="panel-body">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex, adipisci?</div>
                        <div class="panel-footer">Footer</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--<script src="js/jquery.min.js"></script>-->
    <!--<script src="js/bootstrap.min.js"></script>-->
</body>
</html>
To download raw file Click Here

Bootstrap Tutorial

Learn All in Tamil © Designed & Developed By Tutor Joes | Privacy Policy | Terms & Conditions