×

Html & Html5

The World's best Software Development Study Portal

Bootstrap Collapse


Whenever we want to hide any huge information than we can use it . And for that .collapse class is needed.
Let’s understand this by the following program:-


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<h2>Collapsible Content</h2>

<p>As soon as you Click on simple button it will hide the content.</p>

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible </button>

<div id="demo" class="collapse show"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

</div>

</body>

</html>

Output of this Program


Collapsible Content

As soon as you Click on simple button it will hide the content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>

</head>

<body>

<div class="container-fluid">

<div id="accordion">

<div class="card">

<div class="card-header">

<a class="card-link" data-toggle="collapse" href="#collapseOne">

Collapsible Group Item #1 </a>

</div>

<div id="collapseOne" class="collapse show" data-parent="#accordion">

<div class="card-body">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

</div>

</div>

<div class="card>

<div class="card-header">

<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">

Collapsible Group Item #2 </a>

</div>

<div id="collapseTwo" class="collapse" data-parent="#accordion">

<div class="card-body">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

</div>

</div>

<div class="card">

<div class="card-header">

<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">

Collapsible Group Item #3 </a>

</div>

<div id="collapseThree" class="collapse" data-parent="#accordion">

<div class="card-body">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

</div>

</div>

</div>

</div>

</body>

</html>

Output of this Program


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

As soon as we click on Simple collapsible button the text vanishes.









Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute