Develop Reference

localStorage to save navbar state

I want to use localStorage to store the sidebar toggle so browser can remember the last toggle. Can someone please take a look at this code and tell me why it's not working?
$(document).ready(function() {
var sidebarshow = localStorage.getItem('sidebar') == 'true';
$('#sidebar').toggleClass('active', sidebar);
$("#toggle").click(function() {
$("#sidebar").toggleClass("slow",function() {
localStorage.setItem('sidebarshow', 'active');
});
$("#sidebar").toggleClass("active");
});
});
CSS
#sidebar.active {
position: fixed;
top: 0;
left: 0;
background: #1F6482;
width: 250px;
height: 100%;
color: #FFF;
}
#sidebar {
position: fixed;
top: 0;
left: 0;
background: #1F6482;
width: 75px;
height: 100%;
color: #FFF;
}

Problem: 1) you did not set the localStorage for key 'sidebar', But accessing will result into unexpected values.
var sidebarshow = localStorage.getItem('sidebar') == 'true';
Problem: 2) you are setting the localStorage for key 'sidebarshow', But you are not used any where. (at least in above code)
localStorage.setItem('sidebarshow', 'active');
Think of localStorage as a just object with key and values are of type string. Make sure to set the value first and get them later.
Here is sample code working.
$(document).ready(function() {
/*
if (window && window.localStorage.getItem('sidebar') === 'active') {
// if it active show it as active
$("#sidebar").addClass("active");
} else {
$("#sidebar").removeClass("active");
} */
$("#toggle").click(function() {
$("#sidebar").toggleClass("active");
var updated = '';
if (window.localStorage.getItem('sidebar') === 'active') {
updated = 'not_active';
} else {
updated = 'active';
}
window.localStorage.setItem('sidebar', updated);
});
});
#sidebar.active {
position: fixed;
top: 0;
left: 0;
background: #1F6482;
width: 250px;
height: 100%;
color: #FFF;
}
#sidebar {
position: fixed;
top: 0;
left: 0;
background: #1F6482;
width: 75px;
height: 100%;
color: #FFF;
}
#toggle {
margin-left: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar"> Sidebar here </div>
<button id="toggle"> toggle </button>
Please check the screenshot of chrome debug console example with slightly changed to test.

If you're using the Admin-LTE v-3 package for front-end and wants to save the state of sidebar-collapse use this technique........ and an above solution is also working...
https://stackoverflow.com/a/59504461/8455396
Just read carefully and perform an action.
html tag hamburger button
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
<script>
$(document).ready(function() {
/*
check condition what value is stored in local storage if nothing then default
sidebar action would be performed you don't have to worry about this.
In Admin lte version 3 sidebar-collapse added in body tag inspect you browser and check
*/
if (window.localStorage.getItem('sidebar-toggle-collapsed') === 'false') {
// if it is off sidebar-collapse close
$("body").addClass("sidebar-collapse");
} else {
$("body").removeClass("sidebar-collapse");
}
// Perform click event action
$("[data-widget='pushmenu']").click(function() {
var buttonClickedValue = '';
if (window.localStorage.getItem('sidebar-toggle-collapsed') === 'false') {
buttonClickedValue = 'true';
} else {
buttonClickedValue = 'false';
}
// store value in local storage
window.localStorage.setItem('sidebar-toggle-collapsed', buttonClickedValue );
});
});
</script>

How to call jQuery event from another page?

Hi I have a question regarding the issue as title.
There is Page 1 with jQuery controlling to show the div, section 1 and section 2, as below.
$('.section2,.click1').fadeOut(0);
$('.click2').on('click', function() {
$(this).fadeOut(0);
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
});
$('.click1').on('click', function() {
$(this).fadeOut(0);
$('.section2').fadeOut();
$('.section1, .click2').fadeIn();
});
a {
display:block;
}
.section-wrapper {
position: relative;
width:400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click2">Click to section2.</a>
<a class="click1">Click to section1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>
However, when I am at Page 2, there's a button need to link me to the section 2.
Go to Page 1 Section 2
How can I call the jquery function to show the section 2 and hide the section 1?

This is more generic
$(function() {
$('.click').on('click', function() {
let sectionNumber = $(this).data("section");
$(".click").show();
$(this).fadeOut(0);
$('.section-box').not(".section"+sectionNumber).fadeOut();
$('.section'+sectionNumber).fadeIn()
});
let hash = "#section2" // change to location.hash when happy
let section = hash ? hash.substring(1).replace("scrolldown&","") : "section1";
if (hash) {
let sectionNumber = hash.replace(/\D+/,"");
$("[data-section="+sectionNumber+"]").click()
}
});
a {
display: block;
}
.section-wrapper {
position: relative;
width: 400px;
height: 140px;
}
.section-box {
width: 100%;
height: 100%;
}
.section1 {
background: red;
}
.section2 {
position: absolute;
top: 0;
left: 0;
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="click" data-section="2">Click to section 2.</a>
<a class="click" data-section="1">Click to section 1.</a>
<div class="section-wrapper">
<div class="section-box section1">
I am section 1, default section.
</div>
<div class="section-box section2" id="Section2">
I am section 2.
</div>
</div>

You could check for hash tag in page url and show/hide the element.
Edited
$(document).ready(function(){
if(window.location.hash) {
var hashVal = window.location.hash.substring(1);
if(hashVal == "Section2"){
var divId = "#"+hashVal; //id of the section 2 element
$('.section1').fadeOut();
$('.section2, .click1').fadeIn();
var pos = $(divId).offset().top; //top position relative to the document
$('body, html').animate({scrollTop: pos});
}
} else {
// No hash value
}
});

modifying a script to be more like an actual banner slider

I am trying to figure out how to modify this code that I found on stackoverflow to work more like an actual slider.
http://jsfiddle.net/5Lc7cc7u/
1) If on last slider image, I want the next to go back to the first slide.
2) If on the first slider image, I want the back to go back to the last slider image.
3) Is there an easy way to add fade to this to where I can choose between slide and fade?
Thanks!
javascript:
$( "#move_left_button" ).click( function() {
move_left();
} );
$( "#move_right_button" ).click( function() {
move_right();
} );
function move_left() {
if( get_acct_left() >= -480 ) {
$( "#moving_part" ).animate( {
left: "-=480px"
}, 1000, function() {
if( get_acct_left() <= -480 * 2 ) {
$( "#moving_part" ).attr( "data-direction", "to_right" );
}
} );
}
}
function move_right() {
if( get_acct_left() < 0 ) {
$( "#moving_part" ).animate( {
left: "+=480px"
}, 1000, function() {
if( get_acct_left() >= 0 ) {
$( "#moving_part" ).attr( "data-direction", "to_left" );
}
} );
}
}
function get_acct_left() {
return parseInt( $( "#moving_part" ).css( "left" ) );
}
function move_to_next() {
if( $( "#moving_part" ).attr( "data-direction" ) === "to_left" ) {
move_left();
} else {
move_right();
}
}
setInterval( move_to_next, 4000 );
HTML:
<div id="images_holder">
<div id="move_left_button">LEFT</div>
<div id="move_right_button">RIGTH</div>
<div id="moving_part" data-direction="to_left">
<div class="image_holder">
<span>image 1</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 2</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 3</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
</div>
</div>
CSS:
#images_holder {
position: relative;
overflow: hidden;
width: 480px;
height: 360px;
color: red;
}
#moving_part {
position: absolute;
top: 0;
width: 1440px; /* image_width * number_of_images */
height: 360px;
left: 0;
}
.image_holder {
float: left;
width: 480px;
height: 360px;
position: relative;
}
.image_holder span {
position: absolute;
top: 20px;
left: 200px;
}
#move_left_button {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
#move_right_button {
position: absolute;
top: 0;
right: 0;
z-index: 999;
}

jsBin demo
Whoever coded that code you shared... it's a total mi(e)ss.
Some constructive reasons:
z-indexing elements position can be avoided by properly formatting HTML placing elements in a more natural order.
<OVERLAY element> >> BUT WHY?
<underlay element>
-------------------------------
<underlay element>
<OVERLAY element> >> CORRECT
There's no mean to hardcode the sliding DIV width inside the CSS. Should be dynamic
The slide interval should be stopped while the gallery is operated by the user. Clear the interval on gallery hover
Spaghetti code should be avoided. Count slides. Count widths. Separate your logic into functions.
Images should have an alt attribute with the image description. That alt attribute is available to the user from every decent CMS editor. So why not use that data instead of hardcoding it? (Just a suggestion)
Don't create separate code for the fade effect. With a proper HTML and CSS setup it's just about a couple of lines of jQuery to change the gallery effect (see var efx in the example below) and the related animate code.
"good UI = UX up". All users are already accustomed to a widely (properly) used gallery animation logic, and that's if you click on NEXT button > animates the container to the left. (reverse for PREV)
Here you go, simply change the efx variable and see it happen:
jQuery(function( $ ){
var efx = "fade", // "slide" || "fade"
animationTime = 600, // Modify mSeconds as desired
pauseTime = 4000,
$gal = $("#images_holder"), // Cache your elements
$mov = $("#moving_part"),
$sli = $mov.find("> div"),
$btn = $("#prev, #next"),
$dsc = $("#description"),
w = $gal.width(), // Calculate the gallery width!
n = $sli.length, // Get the number of slides
c = 0, // Counter // Start index
itv; // Interval
$mov.width(w*n); // Dynamically set the width
// SETUP (fade or slide?)
if(efx==="fade") $sli.css({position:"absolute", left:0}).fadeOut(0).eq(c).fadeIn(0);
function populateDescription() {
$dsc.text( $sli.eq(c).find("img").attr("alt") );
}
function anim() {
c = c<0 ? n-1 : c%n; // loop-back counter if exceeds
populateDescription();
if (efx==="fade") {
$sli.fadeOut(animationTime).eq(c).stop().fadeIn(animationTime);
}else if(efx==="slide") {
$mov.stop().animate({left: -c*w});
}
}
function auto() {
$btn.stop().fadeOut(); // Hide buttons while autosliding
$dsc.stop().fadeOut(); // Hide descriptions while autosliding
itv = setInterval(function(){
++c; // Increment (just like we do on NEXT click)
anim(); // and animate!
}, pauseTime); // Do every "pause" mSeconds
}
function pause() {
$btn.stop().fadeIn();
$dsc.stop().fadeIn();
return clearInterval( itv ); // Clear any ongoing interval!
}
$gal.hover(pause, auto);
$btn.on("click", function(){
c = this.id==="next" ? ++c : --c; // If next>increment, else decrement
anim(); // Animate!
});
populateDescription(); // Init the first slide description
auto(); // Start the autoslide!
});
#images_holder {
background: red;
position: relative;
overflow: hidden;
height: 360px;
width: 480px;
}
#moving_part {
position: absolute;
height: inherit;
left: 0;
}
#moving_part > div {
position: relative;
height: inherit;
width: 480px;
float: left;
}
#moving_part > div img{
width: 100%;
}
#prev, #next {
position: absolute;
cursor: pointer;
top: 47%;
display: none; /* hide initially */
-webkit-user-select: none;
user-select: none;
}
#next{
right: 0px;
}
#description{
color: #fff;
background: rgba(0,0,0,0.4);
text-align: center;
position: absolute;
padding: 15px;
right: 0;
left: 0;
display: none; /* hide initially */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images_holder">
<div id="moving_part">
<div>
<img alt="Image 1" src="//placehold.it/400x300/c7a&text=1">
</div>
<div>
<img alt="Image description 2" src="//placehold.it/400x300/ac7&text=2">
</div>
<div>
<img alt="Image 3" src="//placehold.it/400x300/7ca&text=3">
</div>
</div>
<div id="prev">PREV</div>
<div id="next">NEXT</div>
<div id="description">Test</div>
</div>
Want to add navigation buttons to the code above? No problem:
It's easy to do it cause of the way we used functions. Style your span buttons inside CSS, Inside HTML just create a parent element like <div id="navigation"></div>.
With jQuery we'll automagically append span buttons to it:
var $nav = $("#navigation"); // Our buttons parent
var $navBtns; // Later, our SPAN buttons
var spans = "";
for(var i=0; i<n; i++) { // `n` is the number of slides!
spans += "<span>"+ (i+1) +"</span>";
}
// Finally append our generated buttons:
$nav.append( spans );
// Retrieve the created buttons and do something on click
$nav.find("span").on("click", function(){
c = $(this).index(); // Set our counter to the clicked SPAN index
anim(); // Animate. That easy.
});
Demo with navigation buttons

here you go: from last it goes back to first (since point 1 is done there is no case 2)
number and size of image holder is no longer hardcoded in js
$( "#move_left_button" ).click( function() {
move_left();
} );
$( "#move_right_button" ).click( function() {
move_right();
} );
var imgNum=$('.image_holder').length;
var imgWidth=parseInt($('.image_holder').css( "width"));
$( "#moving_part" ).css( "width" ,imgNum*imgWidth +"px" );
function move_left() {
if( get_acct_left() >= -imgWidth*imgNum) {
$( "#moving_part" ).animate( {
left: '-='+imgWidth
}, 1000, function() {
if( get_acct_left() <=( -imgWidth * ((imgNum)-1)) ) {
$( "#moving_part" ).attr( "data-direction", "to_right" );
}
} );
}
}
function move_right() {
if( get_acct_left() < 0 ) {
$( "#moving_part" ).animate( {
left: '+='+imgWidth
}, 1000, function() {
if( get_acct_left() >= 0 ) {
$( "#moving_part" ).attr( "data-direction", "to_left" );
}
} );
}
}
function get_acct_left() {
return parseInt( $( "#moving_part" ).css( "left" ) );
}
function move_to_next() {
if( $( "#moving_part" ).attr( "data-direction" ) === "to_left" ) {
move_left();
} else {
move_right();
}
}
setInterval( move_to_next, 4000 );
#images_holder {
position: relative;
overflow: hidden;
width: 480px;
height: 360px;
color: red;
}
#moving_part {
position: absolute;
top: 0;
width: 480px;
height: 360px;
left: 0;
}
.image_holder {
float: left;
width: 480px;
height: 360px;
position: relative;
}
.image_holder span {
position: absolute;
top: 20px;
left: 200px;
}
#move_left_button {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
#move_right_button {
position: absolute;
top: 0;
right: 0;
z-index: 999;
}
<div id="images_holder">
<div id="move_left_button">LEFT</div>
<div id="move_right_button">RIGTH</div>
<div id="moving_part" data-direction="to_left">
<div class="image_holder">
<span>image 1</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 2</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 3</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder">
<span>image 4</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
</div>
</div>
http://jsfiddle.net/5Lc7cc7u/8/
enjoy
Fade version
$("#move_left_button").click(function () {
move_left();
});
$("#move_right_button").click(function () {
move_right();
});
var imgNum = $('.image_holder').length;
var imgWidth = parseInt($('.image_holder').css("width"));
$("#moving_part").css("width", imgNum * imgWidth + "px");
function move_left() {
if (get_acct_left() >= -imgWidth * imgNum) {
$("#moving_part").fadeOut(500, function () {
$("#moving_part").css("left", (get_acct_left() - imgWidth))
if (get_acct_left() <= (-imgWidth * ((imgNum) - 1))) {
$("#moving_part").attr("data-direction", "to_right");
}
$("#moving_part").fadeIn(500, function () {});
});
}
}
function move_right() {
if (get_acct_left() < 0) {
$("#moving_part").fadeOut(500, function () {
$("#moving_part").css("left", (0))
$("#moving_part").attr("data-direction", "to_left");
$("#moving_part").fadeIn(500, function () {});
});
}
}
function get_acct_left() {
return parseInt($("#moving_part").css("left"));
}
function move_to_next() {
if ($("#moving_part").attr("data-direction") === "to_left") {
move_left();
} else {
move_right();
}
}
setInterval(move_to_next, 4000);
#images_holder {
position: relative;
overflow: hidden;
width: 480px;
height: 360px;
color: red;
}
#moving_part {
position: absolute;
top: 0;
width: 480px;
height: 360px;
left: 0;
}
.image_holder {
float: left;
width: 480px;
height: 360px;
position: relative;
}
.image_holder span {
position: absolute;
top: 20px;
left: 200px;
}
#move_left_button {
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
#move_right_button {
position: absolute;
top: 0;
right: 0;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images_holder">
<div id="move_left_button">LEFT</div>
<div id="move_right_button">RIGTH</div>
<div id="moving_part" data-direction="to_left">
<div class="image_holder"> <span>image 1</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder"> <span>image 2</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder"> <span>image 3</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
<div class="image_holder"> <span>image 4</span>
<img src="http://i.ytimg.com/vi/Bor5lkRyeGo/hqdefault.jpg">
</div>
</div>
</div>
http://jsfiddle.net/h3cnn0xv/

hide/show selected form with jQuery and css

i try to make an jQuery function for hide/show a form based on the user's choice!
Here is my code that you will understand better.
…
<p id="joinChoice" class="parent">
<span class="overlay"></span>
<span class="overlay"></span>
<span class="overlay"></span>
</p>
…
<div class="joinForm">
<div id="noneForm"></div>
<div id="mastercardForm"></div>
<div id="visaForm"></div>
<div id="discoverForm"></div>
</div>
My CSS Code :
.joinForm { width: 55%; position: relative; height: 396px;}
#noneForm {
background: url("../img/ccard-none.jpg") no-repeat scroll 0 0 #FFF;
height:396px;
width:616px;
position: absolute;
top: 0;
display: block;
}
#mastercardForm {
background: url("../img/mastercard-form.jpg") no-repeat scroll 0 0 #FFF;
height:396px;
width:616px;
position: absolute;
top: 0;
display: none;
}
#visaForm {
background: url("../img/visa-form.jpg") no-repeat scroll 0 0 #FFF;
height:396px;
width:616px;
position: absolute;
top: 0;
display: none;
}
#discoverForm {
background: url("../img/discover-form.jpg") no-repeat scroll 0 0 #FFF;
height:396px;
width:616px;
position: absolute;
top: 0;
display: none;
}
And jQuery code (by #8y5 )
$('#joinChoice a').click(function (e) {
e.preventDefault();
var $this = $(this);
var i = 0;
// Reset others
var $links = $this.siblings();
$links.removeClass('on');
$links.each(function(linkEl) {
$( '#'+$(linkEl).data('form-id') ).hide();
});
// Activate user choice..
$this.addClass('on')
$('#'+$this.data('form-id')).show();
});

Try with this
$('#joinChoice a').click(function (e) {
e.preventDefault();
var $this = $(this);
var i = 0;
// Reset others
var $links = $this.siblings();
$links.removeClass('on');
$links.each(function(linkEl) {
$( '#'+$(linkEl).data('form-id') ).hide();
});
// Activate user choice..
$this.addClass('on')
$('#'+$this.data('form-id')).show().siblings().hide();
});
Fiddle
OR
$('#joinChoice a').click(function (e) {
e.preventDefault();
var $this = $(this);
$(this).addClass('on').siblings().removeClass('on')
$('#'+$this.data('form-id')).show().siblings().hide();
});
Fiddle

I would personally prefer to make something like this
<p id="joinChoice" class="parent">
<span class="overlay"></span>
<span class="overlay"></span>
<span class="overlay"></span>
</p>
<div id="noneForm" class="joinForm"></div>
<div id="mastercardForm" class="joinForm"></div>
<div id="visaForm" class="joinForm"></div>
<div id="discoverForm" class="joinForm"></div>
JQUERY
function openForm(formname) {
$('.joinForm').hide();
$('#'+formname).show();
}
I hope it will help you achieve your aims!

How to toggle (hide / show) sidebar div using jQuery

I have 2 <div>s with ids A and B. div A has a fixed width, which is taken as a sidebar.
The layout looks like diagram below:
The styling is like below:
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
}
I have <a id="toggle">toggle</a> which acts as a toggle button. On the toggle button click, the sidebar may hide to the left and div B should stretch to fill the empty space. On second click, the sidebar may reappear to the previous position and div B should shrink back to the previous width.
How can I get this done using jQuery?

$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Check working example at http://jsfiddle.net/hThGb/1/
You can also see any animated version at http://jsfiddle.net/hThGb/2/

See this fiddle for a preview and check the documentation for jquerys toggle and animate methods.
$('#toggle').toggle(function(){
$('#A').animate({width:0});
$('#B').animate({left:0});
},function(){
$('#A').animate({width:200});
$('#B').animate({left:200});
});
Basically you animate on the properties that sets the layout.
A more advanced version:
$('#toggle').toggle(function(){
$('#A').stop(true).animate({width:0});
$('#B').stop(true).animate({left:0});
},function(){
$('#A').stop(true).animate({width:200});
$('#B').stop(true).animate({left:200});
})
This stops the previous animation, clears animation queue and begins the new animation.

You can visit w3school for the solution on this the link is here and there is another example also available that might surely help,
Take a look

The following will work with new versions of jQuery.
$(window).on('load', function(){
var toggle = false;
$('button').click(function() {
toggle = !toggle;
if(toggle){
$('#B').animate({left: 0});
}
else{
$('#B').animate({left: 200});
}
});
});

Using Javascript
var side = document.querySelector("#side");
var main = document.querySelector("#main");
var togg = document.querySelector("#toogle");
var width = window.innerWidth;
window.document.addEventListener("click", function() {
if (side.clientWidth == 0) {
// alert(side.clientWidth);
side.style.width = "200px";
main.style.marginLeft = "200px";
main.style.width = (width - 200) + "px";
togg.innerHTML = "Min";
} else {
// alert(side.clientWidth);
side.style.width = "0";
main.style.marginLeft = "0";
main.style.width = width + "px";
togg.innerHTML = "Max";
}
}, false);
button {
width: 100px;
position: relative;
display: block;
}
div {
position: absolute;
left: 0;
border: 3px solid #73AD21;
display: inline-block;
transition: 0.5s;
}
#side {
left: 0;
width: 0px;
background-color: red;
}
#main {
width: 100%;
background-color: white;
}
<button id="toogle">Max</button>
<div id="side">Sidebar</div>
<div id="main">Main</div>

$('#toggle').click(function() {
$('#B').toggleClass('extended-panel');
$('#A').toggle(/** specify a time here for an animation */);
});
and in the CSS:
.extended-panel {
left: 0px !important;
}

$(document).ready(function () {
$(".trigger").click(function () {
$("#sidebar").toggle("fast");
$("#sidebar").toggleClass("active");
return false;
});
});
<div>
<a class="trigger" href="#">
<img id="icon-menu" alt='menu' height='50' src="Images/Push Pin.png" width='50' />
</a>
</div>
<div id="sidebar">
</div>
Instead #sidebar give the id of ur div.

This help to hide and show the sidebar, and the content take place of the empty space left by the sidebar.
<div id="A">Sidebar</div>
<div id="B"><button>toggle</button>
Content here: Bla, bla, bla
</div>
//Toggle Hide/Show sidebar slowy
$(document).ready(function(){
$('#B').click(function(e) {
e.preventDefault();
$('#A').toggle('slow');
$('#B').toggleClass('extended-panel');
});
});
html, body {
margin: 0;
padding: 0;
border: 0;
}
#A, #B {
position: absolute;
}
#A {
top: 0px;
width: 200px;
bottom: 0px;
background:orange;
}
#B {
top: 0px;
left: 200px;
right: 0;
bottom: 0px;
background:green;
}
/* makes the content take place of the SIDEBAR
which is empty when is hided */
.extended-panel {
left: 0px !important;
}