accordian mobile

http://mwancloud.com/stcmall/mobile/#


<?xml version="1.0"?>
   
<main>


<meta>
        <item>
            <link href="JScript/accordian.css" rel="stylesheet" type="text/css" />
        </item>

                <item>
            <script language="javascript" type="text/javascript" src="JScript/jquery-1.6.1.js"></script>
        </item>
                <item>
            <script language="javascript" type="text/javascript" src="JScript/accordianscript.js"></script>
        </item>
       
</meta>

<root level="H">

<div id="wrapper">
                   
            <div id="footer">
                <ul >
               
                <li class="right_arrow"><a href="!ACCTITLEHREF!"><h4>!ACCTITLE!</h4></a></li>
                </ul>
               
                <div class="accordion">               
                    <h4>!HEADERTITLE!</h4>
                   
                    <div>
                    <ul >
                        <li class="right_arrow"><span><a href="HREF">!LNKTITLE!</a></span></li>
                       
                    </ul>
                   
                    </div>
                                 </div>

                            </div>
 </div>
       

</root>
</main>

Ref url:
http://mwancloud.com/stcmall/mobile/#


accordian.css
================

body, body * {
    margin: 0; padding: 0;
}

body {
    font-family: "Helvetica Neue",Helvetica,arial;
    -webkit-text-size-adjust: none;
}

a {
    text-decoration: none;
}
a img{ border:0;}

fieldset {
    border: 0;
}

.center {
    text-align: center;
}




#loginPanel {
    position: absolute;
    /*right: 0;*/
    left: 0;
   
    top: 45px;
   
    width: 100%;
   
    box-shadow: 0px 2px 4px #311d3d;
   
    background-color: #542671 ;
    color: #fff;
    /*
    padding: 10px;
    */
    z-index: 200;
}

#loginPanel form, .loginForm {
    margin: 20px;
}

.loginForm #username,  .loginForm #password {
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    width: 100%;
    line-height: 34px;
    height: 34px;
}

.loginForm #loginButton {
    width: 100%;
}

.loginForm .button {
    background: url(../images/button_Bg.jpg) repeat-x;
    border: 1px solid #230E30;
    border-radius: 4px;
    color: white;
    padding: 0 4px;
    cursor: pointer;
    float: left;
    margin-right: 4px;
    line-height: 30px;
    height: 30px;
}











/* menu */



.clear {
    clear: both;
    visibility: hidden;
}
/** footer **/
#footer{
background:#431e5b;
}
#footer  ul{
list-style:none;
}
#footer  ul li{

border-top:1px solid #3a194f;
height:45px;
}
#footer  ul li a{
color: #FFFFFF;
display: block;
height: 100%;
line-height: 45px;
margin-left: 16px;
font-size: 14px;
font-weight: bold;
}
.right_arrow{
background:url(../images/fm_arrow.jpg) no-repeat center right #542671;
padding-right:10px;
}

/**  column clopase **/

.accordion h1{
 margin-left:20px;
 font-size:16px;
 font-weight:bold;
 color:#ffff;
}
.accordion h4 {
    background: #431e5b url(../images/arrows.gif) no-repeat right -30px;
    padding: 0px 15px;
    margin: 0;
    font-size:14px;
    font-weight:bold;
    border-top: solid 1px #3A194F;
    cursor: pointer;
    color:#fff;
    height:45px;
    line-height:45px;
}

.accordion h4.active {
    background-position: right 22px;
    background-color:#542671;
    color:#fff;
}
.accordion h4   a{
    color:#fff;
}
.accordion h4.active  a{
    color:#fff;
}
.accordion h4  a:hover{
    color:#fff;
}

.accordion p {
    margin: 0;
    padding: 10px 5px 20px 5px;
}




images: arrows.gif,button_Bg.jpg,fm_arrow.jpg

accordianscritp.js
==================

$(function() {

    $(".accordion div").hide();
    $(".accordion h4").click(function() {
        $(this).next(".accordion>div").slideToggle("slow")
                    .siblings(".accordion>div:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h4").removeClass("active");
    });



});