Saved Bookmarks
| 1. |
What should be done in Bootstrap to hide and show large amount of content |
|
Answer» The collapsibles are used in Bootstrap to hide and shows large amount of content. The following are used for Collapsible: .collapse: HIDES content .collapse.show: to show contentLet us see an example of Bootstrap collapse with .collapse class: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Demo</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.1.3/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.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap Collapsible</h2> <p>Show or hide the content:</p> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#mydiv">Click me</button> <div ID="mydiv" class="collapse"> This is the content which is toggled on button click. </div> </div> </body> </html>The following is the output that shows toggled content (show or hide) on button click. First, let us see the result on running: After that, click the above button that TOGGLES content. On clicking, the collapsed content will be visible: |
|