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?
This question is related to
javascript
jquery
css
jquery-events
$(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;
}
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.
Using Javascript
var side = document.querySelector("#side");_x000D_
var main = document.querySelector("#main");_x000D_
var togg = document.querySelector("#toogle");_x000D_
var width = window.innerWidth;_x000D_
_x000D_
window.document.addEventListener("click", function() {_x000D_
_x000D_
if (side.clientWidth == 0) {_x000D_
// alert(side.clientWidth);_x000D_
side.style.width = "200px";_x000D_
main.style.marginLeft = "200px";_x000D_
main.style.width = (width - 200) + "px";_x000D_
togg.innerHTML = "Min";_x000D_
} else {_x000D_
// alert(side.clientWidth);_x000D_
side.style.width = "0";_x000D_
main.style.marginLeft = "0";_x000D_
main.style.width = width + "px"; _x000D_
togg.innerHTML = "Max";_x000D_
}_x000D_
_x000D_
}, false);
_x000D_
button {_x000D_
width: 100px;_x000D_
position: relative; _x000D_
display: block; _x000D_
}_x000D_
_x000D_
div {_x000D_
position: absolute;_x000D_
left: 0;_x000D_
border: 3px solid #73AD21;_x000D_
display: inline-block;_x000D_
transition: 0.5s; _x000D_
}_x000D_
_x000D_
#side {_x000D_
left: 0;_x000D_
width: 0px;_x000D_
background-color: red;_x000D_
}_x000D_
_x000D_
#main {_x000D_
width: 100%;_x000D_
background-color: white; _x000D_
}
_x000D_
<button id="toogle">Max</button>_x000D_
<div id="side">Sidebar</div>_x000D_
<div id="main">Main</div>
_x000D_
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});
}
});
});
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
$('#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;
}
Source: Stackoverflow.com