<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-2.2.4.min.js"></script> <script src='https://kit.fontawesome.com/a076d05399.js'></script> <div> <div class="logoImage"> <img src="https://westkowloon--sit18--c.cs31.content.force.com/servlet/servlet.ImageServer?id=015O00000018fBP&oid=00Dp00000001POY&lastMod=1480497660000"> </div> <br/> <div class="topImage"> </div> <br/> <div id="mainTable"> <div id="exTab1" class="tab-content clearfix"> <ul class="nav nav-pills"> <li class="active"> <a href="#1a" data-toggle="tab">OVERVIEW</a> </li> <li> <a href="#2a" data-toggle="tab">MY EVENTS</a> </li> <li> <a href="#3a" data-toggle="tab">MY PROFILE</a> </li> </ul> </div> <div class="tab-content clearfix"> <div class="tab-pane active" id="1a"> <h3>Overview here!</h3> </div> <div class="tab-pane" id="2a"> <h3>My events here!</h3> </div> <div class="tab-pane" id="3a"> <br/> <div class="profileHeader"> <div class="memberInfo"> <table class="memberTable"> <tr> <td rowspan="2" class="membHeadTd"> <div class="membHeadInfo"> <div class="membHeadShot"> <span class="dot"> <div class="membShort panel-body">JS</div> </span> </div> <div class="memebNameDiv"> <div class="membName">Jessie</div> <i class="fa fa-edit"></i> </div> </div> </td> <td colspan="2"> <div class="membId"> <div class="membIdLabel">WKCDA Member ID</div> <div class="membIdValue">P1000111</div> </div> </td> <td></td> <td></td> <td></td> <td></td> </tr> <tr class="twoTr"> <td> <div class="membLevel">M+ Pioneers</div> </td> <td> <label for="membSince">Membership Since</label> <output id="membSince">11/06/2017</output> </td> <td> <label for="membSince">Expiry Date</label> <output id="membSince">12/12/2019</output> </td> <td> <button type="button" class="renewButton">Renew now</button> </td> <td> <div class="membLevel">M+ Patrons</div> </td> <td> <label for="membSince">Membership Since</label> <output id="membSince">11/06/2017</output> </td> <td> <label for="membSince">Expiry Date</label> <output id="membSince">11/06/2020</output> </td> </tr> </table> </div> <br/> <div class="passwordDiv"> <div class="passwordHint panel-body"> Keep your privacy protected. We highly recommend changing your password periodically to safeguard your online security. </div> <div class="passwordLink panel-body"> <a href="#">Update Password</a> </div> </div> </div> <br/> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading active" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> ACCOUNT INFORMATION </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <table class="info"> <tr> <td rowspan="4" valign="top" class="infoSection">Personal Details</td> <td> <label for="salutation">Salutation</label> <output id="salutation">Miss</output> </td> <td></td> <td></td> </tr> <tr> <td> <label for="firstNameEng">First Name (Eng)</label> <output id="firstNameEng">Jessie</output> </td> <td> <label for="lasttNameEng">Last Name (Eng)</label> <output id="lasttNameEng">Chan</output> </td> <td></td> </tr> <tr> <td> <label for="firstNameChi">First Name (Chi)*</label> <output id="firstNameChi">N/A</output> </td> <td> <label for="lasttNameChi">Last Name (Chi)*</label> <output id="lasttNameChi">N/A</output> </td> <td></td> </tr> <tr> <td> <label for="birthday">Birthday*</label> <output id="birthday">11/22/1994</output> </td> <td></td> <td></td> </tr> </table> <table class="info"> <tr> <td rowspan="4" valign="top" class="infoSection">Contact Details</td> <td> <label for="email">Email*</label> <output id="email">Jessie.chan@gmail.com</output> </td> <td> <label for="mobile">Mobile*</label> <output id="mobile">+852 - 684xxxxxx</output> </td> <td></td> </tr> <tr> <td> <label for="home">Home*</label> <output id="home">N/A</output> </td> <td> <label for="other">Other*</label> <output id="other">N/A</output> </td> <td></td> </tr> </table> <table class="info"> <tr> <td rowspan="4" valign="top" class="infoSection">Address</td> <td> <label for="primaryAddr">Primary Address*</label> <output id="primaryAddr">Room A, 2/F Kueo Jhup Building</output> </td> <td> <label for="deliveryAddr">Delivery Address*</label> <output id="deliveryAddr">Same as Primary Address</output> </td> <td></td> </tr> <tr> <td> <label for="billingAddr">Billing Address*</label> <output id="billingAddr">Same as Primary Address</output> </td> <td></td> <td></td> </tr> </table> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> CUSTOMISED PROFILE </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> details </div> </div> </div> </div> </div> </div> </div> </div>

.logoImage { width:60%; margin:0 auto; margin-top: 10px; } .topImage { width:90%; height: 190px; margin-left: 5%; background:transparent url('https://westkowloon--sit18--c.cs31.content.force.com/servlet/servlet.ImageServer?id=015p0000000bwFn&oid=00Dp00000001POY&lastMod=1575818892000') no-repeat center center /cover } #mainTable { width:60%; margin:0 auto } #exTab1 { border-bottom: 2px solid #808080; } #exTab1 .nav-pills > li > a { border: 1px solid #ddd; border-radius: 0; color: #ddd; margin-left: 15px; } .panel-title>a, .panel-title>a:active{ display:block; padding:8px; color:#555; font-size:16px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; word-spacing:3px; text-decoration:none; } .panel-heading a:before { font-family: 'Glyphicons Halflings'; content: "\e114"; float: right; transition: all 0.5s; } .panel-heading.active a:before { transform: rotate(180deg); } .info { width: 100%; } .info td { width: 25%; padding-top: 15px; } .info label { margin-bottom: 0px; color: #bfbfbf; font-weight: normal; font-size: 12px; } .info output { padding-top: 0px; font-size: 12px; } .infoSection { font-weight: bold; color: #000000; } .profileHeader { width:95%; margin:0 auto; } .memberInfo { width: 100%; } .passwordDiv { background-color: #e6e6e6; width:70%; display: flex; } .passwordHint { width:75%; color: #bfbfbf; font-size: 10px; } .passwordLink { width:25%; } .passwordLink a { font-weight: bold; color: #000000; font-size: 11px; } .memberTable { width: 100%; } .memberTable td { width: 12.5%; padding-top: 10px; padding-bottom: 10px; } .memberTable label { color: #bfbfbf; font-weight: normal; font-size: 10px; margin-bottom: 0px; } .memberTable output { font-weight: bold; font-size: 10px; padding-top: 0px; } .membId { display: flex; } .membIdLabel { font-size: 10px; } .membIdValue { font-weight: bold; font-size: 12px; margin-left: 10px; } .membLevel { font-weight: bold; font-size: 12px; border-right: 1px solid #bfbfbf; height: 100%; margin-right: 10%;; } .twoTr td { border-top: 1px solid #bfbfbf; } .renewButton { display: inline-block; font-size: 10px; font-weight: 400; line-height: 1.42857; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; background-image: none; padding: 6px 6px; border-width: 1px; border-style: solid; border-color: transparent; border-image: initial; border-radius: 4px; color: #fff; background-color: #d9534f; } .membName { font-weight: bold; font-size: 12px; margin-right: 5px; } .memebNameDiv { display: flex; height: 30% } .membHeadInfo { height: 100% } .membHeadShot { height: 70% } .dot { border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; height: 60px; width: 60px; border-radius: 50%; display: inline-block; margin-bottom: 5px; } .membShort { font-weight: bold; font-size: 20px; }

$('.panel-collapse').on('show.bs.collapse', function () { $(this).siblings('.panel-heading').addClass('active'); }); $('.panel-collapse').on('hide.bs.collapse', function () { $(this).siblings('.panel-heading').removeClass('active'); });