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.

Theme: apostrophe-2

  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
    get_header(); ?>
    
    <div id="sidebar_controller_block">
        Sidebar hide/show <input id="sidebar_controller" type="button" value=">">
    </div>
    
    <section id="primary" class="content-area">
  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('>');
      }
      });
    });
  5. Add css in “Custom CSS & JS” plugin
    #sidebar_controller_block{
        text-align:right;
    }
    
    #sidebar_controller{
        background: #fafafb;
        padding: 2px 6px;
        margin-right: 8px;
        border:solid 1px #72a0e8;
        font-weight: bold;
    }

Result

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

Theme: Point

Custom js

$(document).ready(function(){
	var sidebar = $('aside');
	var article = $('article');
	var controller = $('#sidebar_controller');
	$("#sidebar_controller_block").appendTo($('h1.title'));
	if($.browser.mobile) $("#sidebar_controller_block").hide();

	$('#sidebar_controller_block').on('click',function(){
	    if(sidebar.is(':visible')){
		sidebar.hide();
		article.css('width','100%');
		controller.val('<');
	    }
	    else{
		article.css('width','67%');
		sidebar.show();
		controller.val('>');
	    }
	});
});

single.php

<!-- End Article -->
<div id="sidebar_controller_block" style="text-align:right;color:#aaa;font-size:11px;float:right;">
    宽窄屏切换 <input id="sidebar_controller" type="button" value=">" style="background: #fafafb;padding: 2px 6px;border: solid 1px #b8cff5;font-weight: bold;">
</div>
<!-- Start Sidebar -->

Result

wide screen switcher

310 total views, 1 views today

Author: Albert

Leave a Reply