Jquery Accordion menu

$(function(){

$('#accordian ul:first').show();

$('#accordian li a').click(

function accmenu(){

var accstatus = $(this).next();
if ((accstatus.is('ul')) && (accstatus.is(':visible')))
{
accstatus.slideUp();
}
if ((accstatus.is('ul')) && (!accstatus.is(':visible')))
{
accstatus.slideDown();

}
});

});

When we are nesting the child menu list into the parent menu list in a vertical manner, we can add this accordion style. It'll be more straight forward and clear to understand.

Simple Drop down menu in jquery

Script i mentioned below is very simple to use and understand. It's effective too.. Let's check it out.

$(document).ready(function(){

$('#mainmenu li').hover(
function(){
$('ul',this).slideDown('slow');
},
function (){
$('ul',this).slideUp('slow');
}
);

});

Simple lightbox in Jquery

I am really happy to write about this lightbox. I thought it'll be hard to create a lighbox but i tried the below script it's fantastic. You can do really enjoy!

Jquery script(Don't forget to include jquery library)
/*Smooth Pop up window*/
var popupstatus = 0;

//Loading Popup window
function loadpop(){
if (popupstatus == 0)
{
$('#base').css({'opacity':'0.6'});
$('#base').fadeIn('slow');
$('.more').fadeIn('slow');
popupstatus = 1;
}
}

//Disabling popup window

function disablepop(){
if (popupstatus == 1)
{
$('#base').fadeOut('slow');
$('.more').fadeOut('slow');
popupstatus = 0;
}
}

//Making the lightbox center to the page

function poscenter(){
var windowwidth = document.documentElement.clientWidth;
var windowheight = document.documentElement.clientHeight; 

var popwidth = $('.more').width();
var popheight = $('.more').height();

$('.more').css(
{
'top':windowheight/2-popheight/2,
'left':windowwidth/2-popwidth/2
});
}


//Loading Popup
$(document).ready(function(){
$('#html a').click(function(){
poscenter();
loadpop();
})
});

//Disable Popup
$(document).ready(function(){
$('.more a.close').click(function(){
disablepop();
});
$('#base').click(function(){
disablepop();
});
});

HTML part
<div id="base"></div>
<div id="htmlmore" class="more">
<p align="right"><a href="#close" class="close">X</a></p>
The content will goes here.
<div>

CSS part
#base {
display:none;
background:#666;
opacity:0.6;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
.more {
display:none;
position:absolute;
z-index:2;
width:400px;
height:300px;
background:#fff;
padding:10px;
border:solid 2px #666;
}

Tab in Jquery

Nowadays Jquery simplified the UI developer workload. Here i given tab controlled content by using jquery library. This method will help you to use multi tabs with respective contents.

<div id="uitab">
<ul>
<li><a class="sltd" href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#jscript">Javascript</a></li>
</ul>
<div id="html">
HTML is the language can be understood by all web browsers. Used to visually present the data.
<a href="#">Click here</a>
</div>
<div id="css">
CSS is used with html and xml to showcase the data in web browser.
<a href="#">Read more</a>
</div>
<div id="jscript">
Javascript is the client side running script. It can be used with all programming languages.
<a href="#">Readmore</a>
</div>
</div>

$(function (){
 var content = $('#uitab > div');
 $('#uitab li a').click(function(){
 content.slideUp('6000').filter(this.hash).slideDown('3000');
//Here slideUp and slideDown can be replaced with your animations ...
 $('#uitab li a').removeClass('sltd');
 $(this).addClass('sltd');
 return false;
 });
});

In the above code you can change the slideUp to hide slideDown to show. filter(this.hash) filters the anchor tag's href value which is clicked.By having that value we enabling the slideDown to the content which is having the same id i.e., filtered from anchor tag href. For E.g. HTML anchor tag href value is "#html" (<a href="#html">). The html tab content div id is "#html" (<div id="html">). Maintaining the same vaue to id is important. Sorry for not including the css...