How to toggle (hide / show) sidebar div using jQuery
Solution 1
$('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/
Solution 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.
Solution 3
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
Solution 4
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});
}
});
});
Solution 5
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>
Related videos on Youtube
Alfred
I am a Full Stack developer and a DevOps Engineer, who always to learn from, and contribute to, the technology community. I was a beginner in programming once. What all I had was pieces of scattered and crude knowledge (don't know if i can call it knowledge) then. Later, I joined for Master of Computer Applications in a college and there, I got a great teacher. It was her, who taught me when and where to use 'while' and 'for' loops even.What all knowledge I have now, and what all achievements I've made till now, is only because of her. Compared to her, I am ashes. Hats off my dear teacher Sonia Abraham, you are the best of your kind. Sonia Abraham is a professor of the Department of Computer Applications, M.A College of Engineering, Mahatma Gandhi University
Updated on January 06, 2021Comments
-
Alfred over 3 years
I have 2
<div>
s with idsA
andB
. divA
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 divB
should stretch to fill the empty space. On second click, the sidebar may reappear to the previous position and divB
should shrink back to the previous width.How can I get this done using jQuery?
-
laike9m over 10 yearstoggle was deprecated in jQuery 1.8 and removed in jQuery 1.9
-
RyBolt over 7 yearstoggle is still in jQuery, but the signature is not as this answer demonstrates. toggle