Defination
1. Collapse Means suddenly fall down.
2. Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
3. Collpse means expand area just like toggle.
4. We Want to Toggle like show and hide any paragraph On Click.
2. Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
3. Collpse means expand area just like toggle.
4. We Want to Toggle like show and hide any paragraph On Click.
Example
<html><head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>
Collapse</h3>
<button class="btn btn-info" data-target="#test" data-toggle="collapse" type="button">Simple collapsible</button>
<div class="collapse" id="test">
Hello This is collapse Function Use
</div>
</div>
</body>
</html>
OutPut
Please Click on Button and show Expand Paragraph
Collapse
Hello This is collapse Function Use
The Collapse Plugin Classes
| Class | Discription |
| .collapse : | Hides the content |
| .collapse in : | Show the content |
| .collapsing : | Added when the transition starts, and removed when it finishes |
0 comments :
Post a Comment