I'm working on implementing a sidebar shrink effect when collapsing it using a combination of custom CSS, jQuery, and Bootstrap. The custom CSS and jQuery handle the shrinking effect, while Bootstrap is used for styling purposes. However, I am facing an issue where some elements in the sidebar do not disappear or hide after the collapse animation. Below is a simplified version of the code along with accompanying images for reference.
Any insights into why this might be happening?
Images (before and after):
https://i.sstatic.net/5jfFZ.png
https://i.sstatic.net/4E60q.png
Code:
<!doctype html>
<html lang="en">
<head runat="server">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="603d20202b1611172636657c76657376e06c3d223d3d223d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bd9598948f98959e94bbd29294988b92959984f994848fd4aba994888dc194fef0ffe0e0ffefa094fff182ef879fb4fedab98f92">[email protected]</a>/font/bootstrap-icons.css" rel="stylesheet">
<style>
/* Styling for 'shrink' effect when Sidebar is open. */
.not-bs-sidebar {
-webkit-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
/* Styling to make Main area fill page when Sidebar is collapsed. */
.not-bs-main {
flex: 1;
}
/* Styling to collapse Sidebar. */
.not-bs-sidebar.active {
width: 0px;
padding: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server" class="container-fluid">
<div class="row">
<div class="col-md-2 bg-primary not-bs-sidebar" id="sidebar" style="padding-top: 50px;">
<h1>WTF! Why won't this hide?</h1>
</div>
<div class="col-md-10 not-bs-main" id="main">
<div class="row not-bs-header bg-dark">
<div class="col">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<button type="button" class="btn btn-primary" id="ButtonCollapse">
<i class="bi bi-justify"></i>
</button>
</nav>
</div>
</div>
<div class="row not-bs-body">
<div class="col" style="height: 400px;">
</div>
</div>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="00652929232f28255d23292828">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('#ButtonCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
})
});
</script>
</body>
</html>