Question

I’ve got a Side Nav where i wish each list item in the navigation to be clickable, which initiates a toggle of further options for that section.

I’ve got a fiddle of my rough code thus far to try demonstrate what i’m talking about. The red column would be the toggled section triggered by each link on the first column. However my main issues is the best way to achieve this efficiently. Obviously there are 7 links, which means 7 toggles i would need.

JS fiddle: http://jsfiddle.net/visualdecree/Be6ry/31/ *edit – I require the 7 links to all have a separate div that toggles in with different options.

Would i have 7 hidden divs that are toggled by 7 different triggers?

Any help with this would be appreciated.

Answer 1

jQuery:

$(".sn a").on('click',function(){
    var panID = $("#" + $(this).data('panel') );
    $("div[id*='sn-pan-']").hide({slide:'toggle'}, 1000);
    $(panID).css("left","100px").animate({width:'toggle'}, 500)
})​;

Side Nav HTML:

<ul class="sidenav">
    <li class="sn"><a href="#" data-panel="sn-pan-1">Lorem</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-2">Ipsum</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-3">Dolar</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-4">Sit</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-5">Amet</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-6">Et</a></li>
    <li class="sn"><a href="#" data-panel="sn-pan-7">Donut</a></li>
 </ul>

Side Nav Panel HTML:

 <!-- hidden panel that slides out? -->
 <div id="sn-pan-1">
     <ul>
         <li>Stuff 1</li>
         <li>Here</li>
     </ul>
  </div>
 <div id="sn-pan-2">
     <ul>
         <li>Stuff 1</li>
         <li>Here</li>
     </ul>
  </div>
  ...
  ...
  <div id="sn-pan-7">
     <ul>
         <li>Stuff 7</li>
         <li>Here</li>
     </ul>
  </div>

CSS:

.sn a {
    width: 100%;
    display: block;
    overflow: hidden;
    padding: 10px 0;
    border-bottom: 1px solid #
}

div[id*="sn-pan-"]{
    float: left;
    background: red;
    width: 100px;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0;
    display: none;
}

SEE DEMO