Option to hide sidebar in front-end?

Yes, there is a way by using some CSS and JavaScript(not aware of about any plugins).
Can you provide a link to your side so that i can provide you the exact code?

Here’s the general idea on what i am talking about:
Consider you have a sidebar on a page with has the following HTML and CSS:
HTML:

<div class="main-content">
  <a href="#" class="hider-btn">TOGGLE SIDEBAR</a>
  MAIN CONTENT TEXT...
  ...some more text...
</div>
<div class="sidebar">
   SOME SIDEBAR CONTENT
   ...some more content...
</div>

CSS:

.main-content {
  display: inline-block;
  height: 100vh;
  background: #cccccc;
  color: #2e2e2e;
  width: 50%;
}
.sidebar {
  float: right;
  height: 100vh;
  background: #2e2e2e;
  color: #ffffff;
  width: 50%;
}

Then you can just hide the sidebar by just creating a new CSS class, like this:

.sidebar-hider {
   display: none !important;
}

And then, toggle this class using JavaScript(jQuery required) to show and hide the sidebar by detecting the onclick event of hider-btn class, like this:

$('.hider-btn').click(function(){
   $('.sidebar').toggleClass('sidebar-hider');
});

Here’s a working JSFiddle demo:
https://jsfiddle.net/5mcLvywy/

Let me know if this helps 🙂

• This reply was modified 7 years ago by otpidusprime.