javascript - Making a link slide and open a new div to it's right -

i need help/guidance on how accomplish this, trying make div slide out right left side once individual link clicked. far, i'm struggling it, question how this?

this have far.

css:

.main-header {   width: 1020px;   height: 50px;   background: #555;   border: 2px solid #444;   border-top: none;     -moz-border-radius: 0 0 25px 25px;     -webkit-border-radius: 0 0 25px 25px;     border-radius: 0 0 25px 25px;     -moz-box-shadow: 0 22px 14px -14px #000, inset 0 -0.3em 0.9em 0.3em #000;     -webkit-box-shadow: 0 22px 14px -14px #000, inset 0 -0.3em 0.9em 0.3em #000;     box-shadow: 0 22px 14px -14px #000, inset 0 -0.3em 0.9em 0.3em #000;   position: fixed;     -moz-transition: .3s ease;     -webkit-transition: .3s ease;     -o-transition: .3s ease;     transition: .3s ease;   top: 0; } .main-header h1 { width: 1020px; float: left; text-align: center; } .toggle-menu {   width: 44px;   height: 44px;   padding: 6px 0 0 12px;   margin: 0;   border-right: 2px solid #444;   position: absolute;   top: 0;   color: #fff;   font-size: 26px;   text-shadow: -1px -1px 1px #000, 1px 1px 2px rgba(204, 204, 204, 0.9);   cursor: pointer; } .page-wrap { float: left; -moz-transition: .3s ease; -webkit-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease; } .main-nav-check { display: none; } .main-nav {   width: 0;   position: fixed;   top: 100px;   overflow: hidden;     -moz-transition: .3s ease;     -webkit-transition: .3s ease;     -o-transition: .3s ease;     transition: .3s ease; } .main-nav .default_logo {   width: 150px;   height: 120px;   padding: 0;   margin: 0 0 0 15px;   background: url(../images/profiles/default_logo1.png) no-repeat 0 0;   border: 2px solid #444;     -moz-border-radius: 12px;     -webkit-border-radius: 12px;     border-radius: 12px;     -moz-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;     -webkit-box-shadow: inset 0 -0.3em 0.9em 0.3em #000;     box-shadow: inset 0 -0.3em 0.9em 0.3em #000;   float: left; } .main-nav {   padding: 5px 15px;   margin: 0 0 0 169px;   border-bottom: 1px solid #444;   display: block;   position: relative;   top: 12px;   color: #15adff;   font: 18px arial, helvetica, sans-serif;   font-weight: bold;   font-variant: small-caps;   text-shadow: -1px -1px 1px #000, 1px 1px 2px rgba(204, 204, 204, 0.9); } .main-nav a:hover, .main-nav a:focus { background: rgba(204, 204, 204, 0.2); border-right: 7px solid #15adff; color: #111; } #main-nav-check:checked + #main-nav { width: 350px; } .close-menu { display: none; } #main-nav-check:checked ~ .page-wrap .open-menu { display: none; } #main-nav-check:checked ~ .page-wrap .close-menu { display: block; } 

html:

<input type="checkbox" class="main-nav-check" id="main-nav-check" />             <nav class="main-nav" id="main-nav">                 <div class="default_logo"></div>             <a href="#">profile settings</a>             <a href="#">recent updates</a>                         <a href="#logoff">sign out</a>             </nav>             <div class="page-wrap">                 <header class="main-header">                 <label for="main-nav-check">                         <div class="toggle-menu" title="options">☰</div>                     </label>             </header>             </div> 

i'm trying make if click on link on left side, let's 'profile settings', new div opens , slides out right. need each individual link displaying content in right div once link has been clicked left side, struggling it. if provide jsfiddle, i'd appreciate and/or respond additional code make work, again i'd thankful.

here's jsfiddle of have far: http://jsfiddle.net/xp9wy

try changes http://jsfiddle.net/xp9wy/4/

html

   <nav class="main-nav" id="main-nav">          <div class="leftside">                          <div class="default_logo"></div>                         <a href="#profile" class="head">profile settings</a>                         <a href="#updates" class="head">recent updates</a>                         <a href="#logoff">sign out</a>          </div>              <div class="rightside">                 <div id="profile" class="section"> profile </div>                 <div id="updates" class="section"> updates</div>                                </div>     </nav> 

css

#main-nav-check:checked + #main-nav { width: 750px; }  .leftside{  float:left;  width: 350px;     }  .rightside{    margin-top:5px;    float:right;    width:350px; }  .rightside .section{      border:#ccc 1px solid;     display:none;     margin-left:10px;     padding:10px; } 

javascript

$(document).ready(function(){     $('a.head').click( function(){        var = $(this) ;        var section = $( a.attr('href') );        section.removeclass('section');        $('.section').hide();        section.addclass('section');          if(! section.is(':visible') ){               section.fadein(500);         };     });  });