Bootstrap Collapse

Bootstrap is a free and open source front end development framework for the creation of websites and web apps.
Post Reply
User avatar
C0D3D
Site Admin
Posts: 159
Joined: Sun Jun 26, 2022 10:46 pm
Contact:
Contact C0D3D

Bootstrap Collapse

Post by C0D3D »

Expanding and collapsing elements via data attributes

Example 1

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creating Bootstrap Collapsible Element via Data Attributes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <p>
        <!-- Trigger Buttons HTML -->
        <a href="#myCollapse" data-bs-toggle="collapse">Toggle Element</a>
        <button type="button" class="btn btn-primary ms-4" data-bs-toggle="collapse" data-bs-target="#myCollapse">Toggle Element</button>
    </p>
    <!-- Collapsible Element HTML -->
    <div class="collapse show" id="myCollapse">
        <div class="card card-body">This is a simple example of showing and hiding specific element via data attributes. Click any trigger buttons to toggle this panel.</div>
    </div>
</div>
</body>
</html>

Expanding and collapsing elements via JavaScript

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Creating Bootstrap Collapsible Element via JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
    var btn = document.getElementById("myBtn");
    var element = document.getElementById("myCollapse");

    // Create a collapse instance, toggles the collapse element on invocation
    var myCollapse = new bootstrap.Collapse(element);

    btn.addEventListener("click", function(){
        myCollapse.toggle();
    });
});
</script>
</head>
<body>
<div class="m-4">
    <!-- Trigger Button HTML -->
    <button type="button" class="btn btn-primary mb-4" id="myBtn">Toggle Element</button>

    <!-- Collapsible Element HTML -->
    <div class="collapse" id="myCollapse">
        <div class="card card-body">This is a simple example of showing and hiding specific element via data attributes. Click the trigger button to toggle this panel.</div>
    </div>
</div>
</body>
</html>

Bootstrap .collapse(options) method

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Collapse Methods</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
    $(".toggle-false").click(function(){
        $("#myCollapsible").collapse({
            toggle: false
        });
    });
    $(".show-btn").click(function(){
        $("#myCollapsible").collapse('show');
    });
    $(".hide-btn").click(function(){
        $("#myCollapsible").collapse('hide');
    });
    $(".toggle-btn").click(function(){
        $("#myCollapsible").collapse('toggle');
    });
});
</script>
<style>
p{
    background: #eee;
    border: 1px solid #ccc;
    margin: 20px 0;
    padding: 30px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <!-- Trigger Button HTML -->
    <input type="button" class="btn btn-primary toggle-false" value="Toggle False">
    <input type="button" class="btn btn-primary show-btn" value="Show Button">
    <input type="button" class="btn btn-primary hide-btn" value="Hide Button">
    <input type="button" class="btn btn-primary toggle-btn" value="Toggle Button">

    <!-- Collapsible Element HTML -->
    <div id="myCollapsible" class="collapse show"><p>This is a simple example of expanding and collapsing individual element via JavaScript. <br><b>Click on the above buttons to see how it works.</b></p></div>
</div>
</body>
</html>

Bootstrap .collapse('toggle') method

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Collapse Methods</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
    $(".toggle-false").click(function(){
        $("#myCollapsible").collapse({
            toggle: false
        });
    });
    $(".show-btn").click(function(){
        $("#myCollapsible").collapse('show');
    });
    $(".hide-btn").click(function(){
        $("#myCollapsible").collapse('hide');
    });
    $(".toggle-btn").click(function(){
        $("#myCollapsible").collapse('toggle');
    });
});
</script>
<style>
p{
    background: #eee;
    border: 1px solid #ccc;
    margin: 20px 0;
    padding: 30px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <!-- Trigger Button HTML -->
    <input type="button" class="btn btn-primary toggle-false" value="Toggle False">
    <input type="button" class="btn btn-primary show-btn" value="Show Button">
    <input type="button" class="btn btn-primary hide-btn" value="Hide Button">
    <input type="button" class="btn btn-primary toggle-btn" value="Toggle Button">

    <!-- Collapsible Element HTML -->
    <div id="myCollapsible" class="collapse show"><p>This is a simple example of expanding and collapsing individual element via JavaScript. <br><b>Click on the above buttons to see how it works.</b></p></div>
</div>
</body>
</html>

Bootstrap .collapse('show') method

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Collapse Methods</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
    $(".toggle-false").click(function(){
        $("#myCollapsible").collapse({
            toggle: false
        });
    });
    $(".show-btn").click(function(){
        $("#myCollapsible").collapse('show');
    });
    $(".hide-btn").click(function(){
        $("#myCollapsible").collapse('hide');
    });
    $(".toggle-btn").click(function(){
        $("#myCollapsible").collapse('toggle');
    });
});
</script>
<style>
p{
    background: #eee;
    border: 1px solid #ccc;
    margin: 20px 0;
    padding: 30px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <!-- Trigger Button HTML -->
    <input type="button" class="btn btn-primary toggle-false" value="Toggle False">
    <input type="button" class="btn btn-primary show-btn" value="Show Button">
    <input type="button" class="btn btn-primary hide-btn" value="Hide Button">
    <input type="button" class="btn btn-primary toggle-btn" value="Toggle Button">

    <!-- Collapsible Element HTML -->
    <div id="myCollapsible" class="collapse show"><p>This is a simple example of expanding and collapsing individual element via JavaScript. <br><b>Click on the above buttons to see how it works.</b></p></div>
</div>
</body>
</html>

Bootstrap .collapse('hide') method

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Collapse Methods</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
    $(".toggle-false").click(function(){
        $("#myCollapsible").collapse({
            toggle: false
        });
    });
    $(".show-btn").click(function(){
        $("#myCollapsible").collapse('show');
    });
    $(".hide-btn").click(function(){
        $("#myCollapsible").collapse('hide');
    });
    $(".toggle-btn").click(function(){
        $("#myCollapsible").collapse('toggle');
    });
});
</script>
<style>
p{
    background: #eee;
    border: 1px solid #ccc;
    margin: 20px 0;
    padding: 30px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <!-- Trigger Button HTML -->
    <input type="button" class="btn btn-primary toggle-false" value="Toggle False">
    <input type="button" class="btn btn-primary show-btn" value="Show Button">
    <input type="button" class="btn btn-primary hide-btn" value="Hide Button">
    <input type="button" class="btn btn-primary toggle-btn" value="Toggle Button">

    <!-- Collapsible Element HTML -->
    <div id="myCollapsible" class="collapse show"><p>This is a simple example of expanding and collapsing individual element via JavaScript. <br><b>Click on the above buttons to see how it works.</b></p></div>
</div>
</body>
</html>


Display a message when collapsible element has been completely closed

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4 Collapse Events</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
    $("#myCollapsible").on('hidden.bs.collapse', function(){
        alert("Collapsible element has been completely closed.");
    });
});
</script>
<style>
p{
    background: #eee;
    border: 1px solid #ccc;
    margin: 20px 0;
    padding: 30px;
}
</style>
</head>
<body>
<div class="container-lg my-3">
    <!-- Trigger Button HTML -->
    <input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#myCollapsible" value="Toggle Button">

    <!-- Collapsible Element HTML -->
    <div id="myCollapsible" class="collapse show"><p>This is a simple example of expanding and collapsing individual element via data attribute. <br>Click on the <b>Toggle Button</b> button to see the effect.</p></div>
</div>
</body>
</html>
----------------------------------------------------------------------
Together we are one! One we are many... Much Love from one brother to another...
Working together to achieve amazing things!
Teamwork is key.
Knowledge is Power!

4 Basic datatypes.
Strings: Which store a series of characters.
Int: Which store a full integer or number.
Float: A numeric value with a decimal.
Boolean: Only stores True or False and are very useful with if statements
----------------------------------------------------------------------
ImgBB Image upload
Top
Post Reply

Return to “_._Bootstrap_._”

Who is online

Users browsing this forum: No registered users and 0 guests