<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
<link rel="stylesheet" href="css/template.css" type="text/css"/>
    <script src="js/jquery-1.8.2.min.js" type="text/javascript">
    </script>
    <script src="js/languages/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8">
    </script>
    <script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8">
    </script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
    //Set default open/close settings
    var divs=$('.accordion>div').hide(); //Hide/close all containers

    var h2s=$('.accordion>h2').click(function () {
        h2s.not(this).removeClass('active')
        //alert("TRY");
        $(this).toggleClass('active')
        divs.not($(this).next()).slideUp()
        $(this).next().slideToggle()
        return false; //Prevent the browser jump to the link anchor
    });

        jQuery('h2.acc_trigger').show();


    $('h2.acc_trigger').click(function () {
        $('h2.acc_trigger .arrhead').css('content','url(images/arrowleft.png)');
    if($(this).hasClass('active')){
            $('h2.acc_trigger.active .arrhead').css('content','url(images/arrowdown.png)');
            $(this).hide();
        }else{
            $('h2').hasClass('h2.acc_trigger').show();
        }

    });





});
</script>

<style type="text/css">
h2.acc_trigger {
    padding: 0;
    margin: 0 0 5px -42px;
    height: 46px;
    line-height: 46px;
    width: 800px;
    font-size: 21px;
    font-weight: normal;
    float: left;
    margin-bottom:0;
}

.third{
    /*content: url(images/arrowleft.png);*/
    position: absolute;
    margin: 0 0 0 640px;
    float: left;
    display: block;
    width: 315px;
}

h2.acc_trigger.active{
/*content: url(images/arrowdown.png);*/
}

h2.acc_trigger a {
    color: #222;
    text-decoration: none;
    display: block;
    padding: 0 0 0 50px;
}
h2.acc_trigger.active a {
    color: #FF0000;
}
h2.acc_trigger a:hover {
    color: #999;
}
h2.acc_trigger a:active, h2.active {
    color:#ED2224;

}
h2.active {
    background-position: left bottom;
    /*content: url(images/arrowdown.png);*/
}
.acc_container {
    margin: 0 0 5px;
    padding: 0;
    overflow: hidden;
    font-size: 1.2em;
    width: 835px;
    clear: both;
    background: #f0f0f0;
    border: 1px solid #d6d6d6;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top:none;
}
.acc_container .block {
    padding: 20px;
}

.accordion{
    width: 150px;
    margin: 80px 0 0 270px;
}

.content{
/*position:relative;*/
display:block;
/*margin-top:15px;*/
margin-top:45px;
}

.inputfield{
border-radius:5px;
margin-left:165px;
position:relative;
margin-top: -26px;
width: 205px;
height: 30px;
display:inherit;
}

.rightblock{
position: relative;
margin-left: 400px;
/* margin-top: -78px; */
bottom: 215px;
}

.sec{
width:620px;
}

.tattoo{
font-size:35px;
/*text-align:center;
margin-left:27px;*/

width: 150px;
margin-left: 295px;
}
.tattoo p{
font-size: 20px;
margin-top: 0px;
width: 150px;
margin-left: 270px;
}

.live{
position: absolute;
/* margin-top: -65px; */
margin: -65px 0 0 60%;
font-size: 27px;
}

.note{
position: absolute;
width: 315px;
margin: 25px 0 0 10px;
text-align: center;
background-color: #303030;
color: white;
border-radius: 5px;
padding: 18px;
font-size: 15px;
}

.line{
border: 5px black;
width: 840px;
background-color: black;
margin: -10px 0 0 -8px;
position: absolute;
height: 1px;
display: block;
}

.submit{
top: 15px;
position: relative;
width: 110px;
height: 30px;
border-radius: 5px;
font-size: 18px;
}

label.error{
margin: -25px 0 0 394px;
position: absolute;
}

.error{
border-color:red;
color:red;

}

.title{
position: absolute;
left: 278px;
margin-top: 20px;
font-weight: bold;
font-size: 25px;
}

.first{
position:absolute;
margin-left: 60px;
width: 315px;
}

.second{
position:absolute;
margin-left: 290px;
width: 315px;
}

.third{

}

</style>

    <script type='text/javascript'>
        jQuery(document).ready(function(){
            jQuery("#myform").validationEngine('attach', {
                onValidationComplete: function(form, status){
                    alert("The form status is: " +status+", it will never submit");
                }
            })
        });


    </script>

<div class="title">Account Settings</div>
<form action="" id="myform" method="post">
<div class="accordion">
<h2 class="acc_trigger"><a href="#"><label class="first">Name</label><label class="second">Juan Dela Cruz</label><label class="third">Edit</label></a></h2>
<div class="acc_container">
    <div class="block">
        <div class="leftblock">
            <label class="content" id="username">New username: <input type="text" class="validate[required] text-input inputfield" id="inputusername" name="inputusername"></label>
            <label class="content" id="password">New password: <input type="text" class="validate[required] text-input inputfield" id="inputpassword" name="inputpassword"></label>
            <label class="content" id="password">Re-type password: <input type="text" class="validate[required] text-input inputfield" id="inputrepassword" name="inputrepassword"></label>
        </div>
    </div>
</div>
<h2 class="acc_trigger"><a href="#"><label class="first">Username</label><label class="second">globeJuan</label><label class="third">Edit</label></a></h2>
<div class="acc_container">
    <div class="block">
        <div class="leftblock">
            <label class="content" id="username">New username: <input type="text" class="validate[required] text-input inputfield" id="inputusername" name="inputusername"></label>
            <label class="content" id="password">New password: <input type="text" class="validate[required] text-input inputfield" id="inputpassword" name="inputpassword"></label>
            <label class="content" id="password">Re-type password: <input type="text" class="validate[required] text-input inputfield" id="inputrepassword" name="inputrepassword"></label>
        </div>
    </div>
</div>
<h2 class="acc_trigger"><a href="#"><label class="first">Password</label><label class="second">password last changed on 06/13/2013</label><label class="third">Edit</label></a></h2>
<div class="acc_container">
    <div class="block">
        <div class="leftblock">
            <label class="content" id="username">New username: <input type="text" class="validate[required] text-input inputfield" id="inputusername" name="inputusername"></label>
            <label class="content" id="password">New password: <input type="text" class="validate[required] text-input inputfield" id="inputpassword" name="inputpassword"></label>
            <label class="content" id="password">Re-type password: <input type="text" class="validate[required] text-input inputfield" id="inputrepassword" name="inputrepassword"></label>
        </div>
    </div>
</div>
<h2 class="acc_trigger"><a href="#"><label class="first">Email Address</label><label class="second">juandc@email.com</label><label class="third">Edit</label></a></h2>
<div class="acc_container">
    <div class="block">
        <div class="leftblock">
            <label class="content" id="username">New username: <input type="text" class="validate[required] text-input inputfield" id="inputusername" name="inputusername"></label>
            <label class="content" id="password">New password: <input type="text" class="validate[required] text-input inputfield" id="inputpassword" name="inputpassword"></label>
            <label class="content" id="password">Re-type password: <input type="text" class="validate[required] text-input inputfield" id="inputrepassword" name="inputrepassword"></label>
        </div>
    </div>
</div>
<h2 class="acc_trigger"><a href="#"><label class="first">Mobile Number</label><label class="second">09271234567</label><label class="third">Edit</label></a></h2>
<div class="acc_container">
    <div class="block">
        <div class="leftblock">
            <label class="content" id="username">New username: <input type="text" class="validate[required] text-input inputfield" id="inputusername" name="inputusername"></label>
            <label class="content" id="password">New password: <input type="text" class="validate[required] text-input inputfield" id="inputpassword" name="inputpassword"></label>
            <label class="content" id="password">Re-type password: <input type="text" class="validate[required] text-input inputfield" id="inputrepassword" name="inputrepassword"></label>
        </div>
    </div>
</div>
</div>
</form>

$('h2') . hasClass('acc_trigger') . show();