March 27, 2012
ways to hide/show a div with a toggle in jQuery
Question by Tom
i’m looking into implementing something similar to the li’s in chrome extension page.
Should i use jQuery slideToggle? maybe someone can provide some sort of a sample
code i could start off with? (i’m new to jQuery)
Answer by aziz punjani
You don’t need any complicated plugins, you can do all of this with jquery. Here is a quick sample i whipped out. It’s simple really.
The html
<div id="outer">
<p>Some outer content </p>
<div id="inner">Slider Content </div>
</div>
The css
#outer{
height: 200px;
width: 200px;
background-color: brown;
overflow: hidden;
position: relative;
}
#inner{
height: 200px;
width: 100%;
background-color: green;
position: absolute;
top: 100%;
}
The JS
$('#outer').hover(
function(){
$('#inner').animate({ top: '0%' }, 'easein' );
},
function(){
$('#inner').animate({ top: '100%' }, 'easein' );
}
);
Here it is in action.
Answer by Starx
Its extremely hard to answer your question. But showing and hiding a div is very easy, just use .toggle()
$("#mydiv").toggle();
