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

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="http://www.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="http://www.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="http://www.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="http://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.

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments