• Hello everyone.

    I was wondering if there’s a way or plugin that creates some kind of button in the frontend that when clicked it hides the sidebar so the visitor can decide if he/she wants to hide or show the sidebar everytime.

    Any clue?
    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • 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, 7 months ago by otpidusprime.
    Thread Starter catmaniax

    (@catmaniax)

    Thanks for the reply, can you tell me your email so I can send you the link there?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Option to hide sidebar in front-end?’ is closed to new replies.