jquery - Can't get one div to show and the rest to hide using buttons -

i have 4 buttons , able click them see div , no others. have seen lot of solutions don't seem working buttons rather links. need buttons fade affect (or @ least, that's way make fade work correctly...) here's html. parent class formatting , below buttons. want l1 go div1 , 1 basically.

<div class="parent">     <div id="div1" style="display:none;">about me content</div>     <div id="div2" style="display:none;">about me content</div> </div> <div class="up"> <pre> <a href="http://www.brynntweeddale.com/"><img src="http://www.brynntweeddale.com/images/logo.png" style="width: 123px; height: 60px; vertical-align: middle;" /></a><button id="l1" onclick="fade(this);">about</button><button id="l2" onclick="fade(this);">photography</button><button id=" l3">design</button><button id="l4" onclick="fade(this);">contact</button></pre> </div> 

i haven't been script work, assume use this:

  $('.parent  div').hide();  $('#nav a').click(function() {     console.log($(this).index('a'));     var $div = $('.parent > div').eq($(this).index('#nav a'));     $div.show();     $('.parent > div').not($div).hide(); }); 

but buttons instead of links.

overall, think i'm confused.

i not sure if can you, can starting point:

note: assume using jquery , bootstrap

http://jsfiddle.net/inferon/ffwtro2e/

html

<div class="parent">     <div id="div1" style="display:none;">div1 content</div>     <div id="div2" style="display:none;">div2 content</div>     <div id="div3" style="display:none;">div3 content</div>     <div id="div4" style="display:none;">div4 content</div> </div> <div class="up"> <a href="http://www.brynntweeddale.com/"><img src="http://www.brynntweeddale.com/images/logo.png" style="width: 123px; height: 60px; vertical-align: middle;" /></a>      <button id="l1" class='btn' >about</button>     <button id="l2" class='btn' >photography</button>     <button id="l3" class='btn' >design</button>     <button id="l4" class='btn' >contact</button> </div> 

javascript

$(function () {     $('.parent  div').hide();      $('.btn').on('click', function(){         $('.parent  div').hide();         var bid = $(this)[0].id[1];         var sel = '#div' + bid;         $(sel).fadetoggle();      }); });