how to unhide a hidden div with bootstrap - css

Question

I'm working on a site built on bootstrap and have a column down the right side that contains a search module and some other things. it gets hidden on smaller screens. I'm hoping to restore just the search module (and hide everything else but the footer) when pressing a button that gets displayed in the menu.
It sounded simple, but I can't seem to figure out how to override it being hidden. The visibility is set in the style sheet but I also tried setting the visibility on the div itself with d-none d-lg-block - no go.
With below code, when hitting the button, the main container hides (though sometimes only when pressing it twice) but it doesn't restore the sidebar. Which, based on the different things I've tried appears to be as intended, just not what I'm trying to do with it..
I'm sure it's something simple, but I've been staring at this for far too long and I'm not doing well with googling. Thanks in advance for any help/suggestions.
Update: The comment confirming it was out of the realm of bootstrap helped a lot. Updated code below to use javascript to handle activating the search module and hiding the main content. a simple function only goes one way, so I am also hiding the search button itself on click and displaying a close button that reverses the actions. The next step was to reset everything if the page width changes (as this function is only intended to be for smaller screens/mobile, and if you action any of the buttons and then increase page width things stay hidden that shouldn't) so I added a third function that listens for page width changes and resets the visibility of the impacted divs when the size becomes large enough to properly display. it's working in testing, but I'm open to feedback, tips, etc. to make it better.
My sincere thanks to all who have helped me get here!
```
/* Set gray background color and 100% height */
.sidebar {
padding-bottom: 10px;
background-color: #f1f1f1;
text-align: center;
justify-content: center;
}
/* this adds padding to bottom of main container in order to account for footer image */
.pb-6 {
padding-bottom: 5rem !important;
}
/* hides this div on small size */
#media screen and (max-width: 768px) {
div.sidebar {
display: none;
}
div.footerimage {
display: none;
}
}
#media (min-width: 768px) {
/* hides hamburger on bigger screens */
.navbar-brand{
display: none;
}
.navbar-search{
display: none;
}
.navbar-pressed{
display: none;
}
}
/* Set black background color, white text and some padding */
footer {
background-color: #000;
color: #fff;
padding: 15px;
margin:0;
}
body {
margin: 0px;
}
html {
font-family: "Lucida Sans", sans-serif;
}
/* images scales */
img {
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
padding: 0px;
margin: 0px;
}
.header {
background-image: url();
background-size: cover;
background-color: #ffffff;
color: #000000;
padding:0;
margin:0;
text-align: center;
width: auto;
height: 100%;
line-height:0;
}
.navbar-pressed {
display: none;
}
.footerimage {
position: relative;
}
.footerpic {
background-image: url();
background-size: contain;
content: '';
height: 200px;
pointer-events: none;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
width: 200px;
}
/* change the background color */
.navbar-custom {
background-color: #1e73be;
margin-bottom: 0;
border-radius: 0;
padding: 0;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #ffffff;
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: #ffffff;
}
/* change the color of navbar title when collapsed */
.navbar-toggler {
color: #ffffff;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
background-color: #035a9e;
}
/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu {
background-color: #1e73be;
}
/* dropdown item text color */
.navbar-custom .navbar-nav .dropdown-item {
color: #ffffff;
}
/* dropdown item hover or focus */
.navbar-custom .navbar-nav .dropdown-item:hover,
.navbar-custom .navbar-nav .dropdown-item:focus {
color: #ffffff;
background-color: #035a9e;
}
.navbar-brand img {
height: 30px;
float: left;
margin-left: 20px;
padding: 0;
}
```
```
<!DOCTYPE html><html lang='en'><head><title>menu test</title><meta charset='utf-8'><meta name='viewport' content='width=device-width, initial-scale=1'><META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=iso-8859-1'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css'><link rel='preconnect' href='https://fonts.gstatic.com'><link href='https://fonts.googleapis.com/css2?family=Atma:wght#600&display=swap' rel='stylesheet'><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script><script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
<script>
function myFunction() {
document.getElementById("maincontainer").style.display = 'none';
document.getElementById("sidebar").style.display = 'block';
document.getElementById("sidecontentdiv").style.display = 'none';
document.getElementById("navbar-search").style.display = 'none';
document.getElementById("navbar-pressed").style.display = 'block';
}
</script>
<script>
function myCloseFunction() {
document.getElementById("maincontainer").style.display = 'block';
document.getElementById("sidebar").style.display = 'none';
document.getElementById("sidecontentdiv").style.display = 'block';
document.getElementById("navbar-search").style.display = 'block';
document.getElementById("navbar-pressed").style.display = 'none';
}
</script>
<script>
function doSomething(matches) {
if (matches) {
// media query matches
} else {
// media query does not match
document.getElementById("maincontainer").style.display = "";
document.getElementById("sidebar").style.display = "";
document.getElementById("sidecontentdiv").style.display = "";
document.getElementById("navbar-search").style.display = "";
document.getElementById("navbar-pressed").style.display = "";
}
}
const query = window.matchMedia("(max-width: 767px)");
query.addEventListener("change", ({ matches }) => doSomething(matches));
doSomething(query.matches);
</script>
</head>
<body>
<div class='header'></div>
<nav class='navbar navbar-expand-md navbar-custom sticky-top'><div class='navbar-brand'><a href='https://www.url.com'><img src='/images/menu.png' alt='Logo'></a></div><div id='navbar-pressed' class='navbar-pressed ml-auto'><button class='navbar-toggler' type='button' onclick="myCloseFunction()"><i class='fa fa-circle-xmark fa-flip-horizontal' style='color:#ffffff'></i></button></div><div id='navbar-search' class='navbar-search ml-auto'><button class='navbar-toggler' type='button' onclick="myFunction()"><i class='fa-solid fa-magnifying-glass fa-flip-horizontal' style='color:#ffffff'></i></button></div><button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarCollapse'><span class='ml-auto' role='button'><i class='fa fa-bars' style='color:#ffffff'></i> Menu</span></button><div class='collapse navbar-collapse justify-content-between' id='navbarCollapse'><div class='navbar-nav'>
<div class='nav-item'><a href='index.php' class='nav-link'>Home</a></div>
<div class='nav-item'><a href='index.php' class='nav-link'>Home</a></div>
<div class='nav-item'><a href='index.php' class='nav-link'>Home</a></div></div>
</div></nav>
<div class='container-fluid text-center'>
<div class='row content'>
<div class='col-md-9 text-left pb-6' id='maincontainer'>
main body of page
</div>
<div id='sidebar' class='col-md-3 sidebar'>
<div id='searchdiv'>
<div class='sidebarheader rounded'><h4>Search:</h4></div>
<div class='searchbox rounded'>search module</div>
</div>
<div id='sidecontentdiv'>
<div class='sidebarheader rounded'><h4></h4></div>
<div class='searchbox rounded'>unimportant module</div>
</div></div>
<footer class='container-fluid text-center'>
<div class='row'>footer text</div>
</footer>
</div></div>
</body></html>
```

Answer 1

If it's simply hide/show div, why not use JavaScript / jQuery? Like,
<button onclick="myFunction()">src</button>
<div id="attid"></div>
<script>
function myFunction() {
document.getElementById("attid").style.display = 'none';
// or to show
// document.getElementById("attid").style.display = 'block';
}
</script>
Couldn't comment because lack of reputation :)

Answer 2

I think this will help you! Joe
const opener = document.getElementById('opener');
const sidebar = document.getElementById('sidebar');
const closer = document.getElementById('closer');
opener.onclick = function(){
sidebar.style.marginRight = 0
}
closer.onclick = function(){
sidebar.style.marginRight = 'calc(var(--length) * -1)'
}
body{
overflow:hidden;
}
#sidebar{
--length:280px;
margin-right:calc(var(--length) * -1);
width:var(--length);
transition:all .2s linear;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<button class="btn btn-primary" id='opener'>opener</button>
<div id = 'sidebar' class="d-flex d-md-none float-end flex-column flex-shrink-0 p-3 bg-light">
<div class="d-flex">
<button class="btn btn-primary" id='closer'>x</button>
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
<span class="fs-4">Sidebar</span>
</a>
</div>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="#" class="nav-link active" aria-current="page">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"></use></svg>
Home
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
Orders
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"></use></svg>
Products
</a>
</li>
<li>
<a href="#" class="nav-link link-dark">
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"></use></svg>
Customers
</a>
</li>
</ul>
<hr>
<div class="dropdown">
<a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>mdo</strong>
</a>
<ul class="dropdown-menu text-small shadow">
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
</div>
</div>