WordPress Add show and hide side bar button switch

In many places have seen this effect, is in the article page can toggle display and hide sidebar function, feeling is still very useful, such as an article of the text content too much, then you can hide the sidebar to display more text for easy browsing. For example, you can see the effect by clicking the Hide Sidebar button below the title of my article.

Before clicking:

After clicking:

Implementation code:
1. Add the following code in the header.php, of course, can also be written in a single JS file, and then introduced in the header.php can also, I was introduced.

1234567891011121314151617181920

<script>    jQuery(document).ready(function($) {        $(‘.close-sidebar‘).click(function() {            $(‘.close-sidebar,.sidebar‘).hide();            $(‘.show-sidebar‘).show();            $(‘.content‘).animate({                width: "1265px"            },            0);        });        $(‘.show-sidebar‘).click(function() {            $(‘.show-sidebar‘).hide();            $(‘.close-sidebar,.sidebar‘).show();            $(‘.content‘).animate({                width: "885px"            },            0);        });    });</script>

Code Description: Modify one of the 1265px, 885px,. Content,. Sidebar to your theme's article content page + sidebar width, article page content width, article content container, sidebar container.
2. Add the following code to the place where you placed the button, usually under the title of the article, and of course the code can be modified according to your own theme.

1	<span class="bianlan"><span class="close-sidebar">隐藏侧边</span><span class="show-sidebar"style="display:none;">显示侧边</span></span>

If there is anything you do not understand, leave a message.
Reference URL: http://www.dedewp.com/2316.html

WordPress Add show and hide side bar button switch