How to show hide or open close fixed sidebar on click in Jquery

Nitin Kumar 12th Jul 2020

This tutorial will explain about to create a fixed sidebar on click event in jquery. When user click on that button it will show the pop up and there is a close icon to close that sidebar. This sidebar is fixed on the screen so that user can scroll the entire page.

This is just a jquery show hide toggle functionality. Sidebar is very important in Web page where we want to show some important part of web page to our website viewer like recently search product, Wish list Item etc.

Here when user clicks on that button then this sidebar element shows in the web page and when user clicks on close button then this sidebar element hide from the web page. It does not take any space of our web page as it come above the DOM element. When again user re clicks on that button again sidebar will come.

Step to step instructions to create show hide or open close fixed sidebar on click in Jquery is given below:

Step 1: First create a button where user clicks to open the fixed sidebar inside your HTML body tag.

<button id="recentItem" class="btn btn-bricky btn-lg">Click Here For Fixed Bar</button>

Step 2: Create a side bar element in HTML and place it inside the same HTML page.

<div class="recentItem">
<a href="#" id="closX" class="cf"><i class="fa fa-times floatR">x</i></a>
<div class="recentItemTxt">Recent Blog</div>
<div class="ctntItem cf margint10">
<h3><a href="https://discussdesk.com//how-to-setup-codeIgniter-in-localhost-with-wamp-server.htm" target="_blank">How to setup CodeIgniter in localhost with WAMP Server</a></h3>
</div>

<div class="ctntItem cf margint10">
<h3><a href="https://discussdesk.com//create-stunning-web-design-with-responsive-layout.htm" target="_blank">Methodologies To Create A Stunning Web Design With Responsive Layout</a></h3>
</div>

<div class="ctntItem cf margint10">
<h3><a href="https://discussdesk.com//how-to-implement-rss-feed-with-wordPress-why-do-bloggers-need-them.htm" target="_blank">RSS Feeds: Why Do Bloggers Need Them, How to Implement it with WordPress?</a></h3>
</div>
</div>

 

Step 3: Write a jquery for onclick event.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script>
$(document).ready(function(){
$("#recentItem").click(function(){
$(".recentItem").animate({
left: '0'
});
$("body").css('overflow','hidden');
});

$("#closX").click(function(){
$(".recentItem").animate({
left: '-300px'
});
$("body").css('overflow','auto');});
});

</script>

Simple CSS goes here

<style>
*{ margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
body{ margin:0; padding:0; font-family: "Open Sans";}
.floatR{ float:right;}
.recentItem{ position:fixed; left:-300px; background:#ccc; top:0; z-index:999999; width:300px; padding:10px; overflow:auto; height:100%;}
.recentItemTxt{ padding:25px 0 0 0px; font-size:1.5em; font-weight:300;}
.ctntItem{ background:#FFF; padding:10px; border-bottom:1px solid #aaa;}
.ctntItem img{ margin-right:8px; display:inline; float:left;}
.ctntItem h3{ font-size:0.95em; font-weight: normal; padding:0 0 7px 0;}
.ctntItem h3 a{ text-decoration:none;}
.propDfn{ display:inline; font-size:0.785em; line-height:19px;}
.cntLoc{ vertical-align:middle; margin:2px 5px 0 0;}
.recentItem a > i{ color:#000; font-size:30px;}
.recentItem a:hover > i{ color:#a54686;}
.ctntItem:hover{ box-shadow:0 0 10px #999;}

.btn {
font-family: "Open Sans";
}
.btn-lg, .btn-group-lg > .btn {
border-radius: 6px;
font-size: 18px;
line-height: 1.33;
padding: 10px 16px;
}
.btn-bricky {
background-color: #c83a2a;
border-color: #b33426;
color: #ffffff;
margin:30px;
}
.centerItem{margin:100px 0 0 250px;}
</style>

Just follow the above simple steps to create a fixed side bar in jquery.

Authored By Nitin Kumar

By profession Nitin Kumar is creative web designer. So opted for work in fields of Web Design Technology. He always showcase his idea to other web lovers. He is also a continuous web blogger.

Also on DiscussDesk