JQuery Popup Example

Example:

<style type="text/css">   
    
    div.menudivInactive { margin:0; padding:0;}    
    div.menudivInactive div.tt { width:140px; margin-left:320px; }    
    div.menudivInactive div.tl { background:none; }    
    div.menudivInactive div.tr { background:none; }    
    div.menudivInactive div.tm { background:url(images/img-request-tab-active-topmiddle.png) top left repeat-x; margin-right:7px; height:1px; line-height:1px; }    
    
    div.menudivInactive div.ml { border-left:#a4acb4 solid 1px; }    
    div.menudivInactive div.mr { background:none; }    
    div.menudivInactive div.mm { margin:0px; margin-right:7px; border-right:#a4acb4 solid 1px; border-bottom:none; padding:5px; padding-top:11px; cursor:pointer; background:url(images/img-request-tab-inactive-bg-gradient.png) #efefef top left repeat-x; }    
    
    div.menudiv { margin:0; padding:0; }    
    div.menudiv div.tt { width:140px; margin-left:320px; }    
    div.menudiv div.tl { background:url(images/img-request-tab-active-topleft.png) top left no-repeat; }    
    div.menudiv div.tr { background:url(images/img-request-tab-active-topright.png) top right no-repeat; }    
    div.menudiv div.tm { background:url(images/img-request-tab-active-topmiddle.png) top left repeat-x; height:7px; line-height:7px; margin-right:8px; margin-left:2px; }    
    
    div.menudiv div.ml { border-left:#a4acb4 solid 1px; }    
    div.menudiv div.mr { background: url(images/img-request-tab-active-extensionright.png) top right repeat-y; }    
    div.menudiv div.mm { margin-right:8px; background:none; background-color:#efefef; padding:5px; border:none; cursor:pointer; }    
    
    div.menudivContent { margin:0; padding:0;}    
    div.menudivContent div.tt { width:460px; }    
    div.menudivContent div.tl { background: url(images/img-request-tab-active-extensionright.png) top right repeat-y; }    
    div.menudivContent div.tr { margin-right:8px; background-color:#efefef; }    
    div.menudivContent div.tm { border: solid 1px #a4acb4; border-right:none; border-bottom:none; margin-right:131px; height:1px; line-height:1px; }    
    
    div.menudivContent div.ml { border: solid 1px #a4acb4; border-top:none; border-right:none; border-bottom:none; width:459px; }    
    div.menudivContent div.mr { background: url(images/img-request-tab-active-extensionright.png) top right repeat-y; }    
    div.menudivContent div.mm { background:url(images/img-request-box-active-bg-gradient.png) #FFFFFF top left repeat-x; margin-right:8px; padding:5px; padding-left:10px; padding-right:10px; height:300px; }    
    
    div.menudivContent div.bl { background: url(images/img-request-box-active-bottomleft.png) top left no-repeat; width:460px; }    
    div.menudivContent div.br { background:url(images/img-request-box-active-bottomright.png) top right no-repeat; }    
    div.menudivContent div.bm { background: url(images/img-request-box-active-bottommid.png)top left repeat-x; height:9px; line-height:9px; margin-right:8px; margin-left:7px; }    
    
    .gone { display:none; }    
</style>    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">   
    $(document).ready(function(){    
        $(".menudivContent").toggleClass("gone");    
        $(".menudivInactive .mm").click(function() {         
            openPouup();    
        })  
        
        //openPouup();    
    });    
    
    function openPouup(){    
        var menudivContent = $(".menudivContent").is(":hidden");    
        /*Pop In Effect    
        $(".menudivInactive").toggleClass("menudiv");    
        $(".menudivContent").toggleClass("gone");*/    
        
        /*Slide Down Effect*/    
        if(menudivContent) {    
            $(".menudivInactive").toggleClass("menudiv");    
            $(".menudivContent").slideDown("fast",function(){});    
        }    
        else    
            $(".menudivContent").slideUp("fast",function(){$(".menudivInactive").toggleClass("menudiv");});    
    }    
    
    /*function closePouup(){    
        var menudivContent = $(".menudivContent").is(":hidden");    
        if(!menudivContent)    
            $(".menudivContent").slideUp("fast",function(){$(".menudivInactive").toggleClass("menudiv");});    
    }*/    
</script>

<div class="menudivInactive">   
    <div class="tt">    
        <div class="tl">    
            <div class="tr">    
                <div class="tm"> </div>    
            </div>    
        </div>    
        <div class="ml">    
            <div class="mr">    
                <div class="mm" align="center"> Lorem IPSUM </div>    
            </div>    
        </div>    
    </div>    
</div>    
<div class="menudivContent">    
    <div class="tt">    
        <div class="tl">    
            <div class="tr">    
                <div class="tm"></div>    
            </div>    
        </div>    
    </div>    
    <div class="ml">    
        <div class="mr">    
            <div class="mm">    
                <p>Lorem Ipsum dolor ami aset fetrs psum dolor ami aset fetr psum dolor ami aset fetr aset fetrs psum dolor ami aset fetr psum d.</p>    
            </div>    
        </div>    
    </div>    
    <div class="bl">    
        <div class="br">    
            <div class="bm"> </div>    
        </div>    
    </div>    
</div>