Controlling sidebar hide/show

Controlling sidebar hide/show on post

Many themes does not have hide/show sidebar control. The following steps add the functionality to any theme.

  1. Create a child theme
  2. Copy single.php to the root folder of the child theme
  3. Edit single.php in the child theme folder, Add the following code to before primary section
    <div id="sidebar_controller_block">
        Sidebar hide/show <input id="sidebar_controller" type="button" value=">">
    </div>
  4. Add JavaScript code after footer, or create a custom js in “Custom CSS & JS” plugin
    $(document).ready(function(){
      $('#sidebar_controller_block').on('click',function(){
        var sidebar = $('#secondary.widget-area');
        var article = $('#primary');
        var controller = $('#sidebar_controller');
        
      if(sidebar.is(':visible')){
        sidebar.hide();
        article.css('width','100%');
        controller.val('<');
      }
      else{
        article.css('width','68.18182%');
        sidebar.show();
        controller.val('>');
      }
      });
    });

Note: this solution was implemented on Apostrophe 2 theme. Please leave comments for me if some theme is not working on this solution.

Advertisements

Leave a Reply