Bootstrap - Phương thức .collapse('hide')
Bài trước
Bài sau

Phương thức .collapse('hide') 

<!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>

Xem ví dụ


Bài trước
Bài sau

HiepsiitMe Facebook Twitter Pinterest LinkedIn

 

 

×