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.
/* 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;
}
}
/* 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;
}
.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;
}<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/4.7.0/css/font-awesome.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'>
<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='https://via.placeholder.com/50' alt='Logo'></a>
</div>
<div class='navbar-search ml-auto'><button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#sidebar, #maincontainer'><i class='fa fa-search 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>
<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>CodePudding user response：
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 :)
CodePudding user response：
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC nuZB EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<button id='opener'>opener</button>
<div id = 'sidebar' >
<div >
<button id='closer'>x</button>
<a href="/" >
<svg width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
<span >Sidebar</span>
</a>
</div>
<hr>
<ul >
<li >
<a href="#" aria-current="page">
<svg width="16" height="16"><use xlink:href="#home"></use></svg>
Home
</a>
</li>
<li>
<a href="#" >
<svg width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
Dashboard
</a>
</li>
<li>
<a href="#" >
<svg width="16" height="16"><use xlink:href="#table"></use></svg>
Orders
</a>
</li>
<li>
<a href="#" >
<svg width="16" height="16"><use xlink:href="#grid"></use></svg>
Products
</a>
</li>
<li>
<a href="#" >
<svg width="16" height="16"><use xlink:href="#people-circle"></use></svg>
Customers
</a>
</li>
</ul>
<hr>
<div >
<a href="#" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://github.com/mdo.png" alt="" width="32" height="32" >
<strong>mdo</strong>
</a>
<ul >
<li><a href="#">New project...</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><hr ></li>
<li><a href="#">Sign out</a></li>
</ul>
</div>
</div>