Showing posts with label jQuery. Show all posts
Showing posts with label jQuery. Show all posts
Wednesday, May 14, 2014
Accordion using jQuery
<div id="accordion">
<h3 class="title">First header</h3>
<div class="content">First content panel</div>
<h3 class="title">Second header</h3>
<div class="content">Second content panel</div>
</div>
<style>
.content{display:none;}
</style>
//Type One
<script>
jQuery('#accordion .title').each(function(){
jQuery(this).addClass('active');
jQuery(this).toggle(function(){
jQuery(this).addClass('active').next().slideDown(200);
},function(){
jQuery(this).removeClass('active').next().slideUp(200);
})
});
</script>
//Type Two
<script>
a = jQuery('.footer-menu').find('#accordion .title');
console.log(a.hasClass('active'));
jQuery('#accordion .title').click(function(e){
e.preventDefault();
speed = 300;
if(jQuery(this).hasClass('active') === true) {
} else if(a.hasClass('active') === false) {
jQuery(this).addClass('active').next('.content').slideDown(speed);
} else {
a.removeClass('active').next('.content').slideUp(speed);
jQuery(this).addClass('active').next('.content').delay(speed).slideDown(speed);
}
});
</script>
Labels:
Javascript,
jQuery
Friday, November 29, 2013
Close a div popup after clicking outside it
Remember that jQuery library must be included.
Use following js code
jQuery(document).mouseup(function (event){
var divcontainer = jQuery(".forclose" ); // Object of DIV
if (divcontainer.has(event.target).length === 0){
divcontainer.hide();
}
});
Use following js code
jQuery(document).mouseup(function (event){
var divcontainer = jQuery(".forclose" ); // Object of DIV
if (divcontainer.has(event.target).length === 0){
divcontainer.hide();
}
});
Labels:
Javascript,
jQuery
Subscribe to:
Comments (Atom)