How to fix this jQuery SlideToggle? -

what i'm trying independently slidetoggle text divs under row of images when images - in dl/dt gallery - clicked, so:

but of course i'm doing @ least few things wrong. complicated markup in jquery tab, may not case. jsfiddle here: http://jsfiddle.net/yfs2v/8/

i think function problematic:

jquery function:

$(".bkcontent").hide(); $("#bookimggallery dt").click(function() {     $(".bkcontent").hide(); $(this).parent().children(".bkcontent").slidetoggle(500); }); 

the html:

<div id="bookimggallery">      <dl class="gallery"><dt><img alt="img" src=""></dt>         <dt>image title one</dt></dl>      <dl class="gallery"><dt><img alt="img" src=""></dt>         <dt>image title two</dt></dl>      <dl class="gallery"><dt><img alt="img" src=""></dt>         <dt>image title three</dt></dl>      <dl class="gallery"><dt><img alt="img" src=""></dt>         <dt>image title four</dt></dl>      <dl class="gallery"><dt><img alt="img" src=""></dt>         <dt>image title five</dt></dl>  </div>  <div id="booktextdiv">  <div class="bkcontent">lorum ipsum....</div>  <div class="bkcontent">lorum ipsum....</div>  <div class="bkcontent">lorum ipsum....</div>  <div class="bkcontent">lorum ipsum....</div>  <div class="bkcontent">lorum ipsum....</div>  </div> 

the css:

#bookimggallery { width: 600px; height:200px; margin:2px; text-align: center;}  dl.gallery {width: 93px; text-align: center; float: left;}  .gallery dt { width: 80px; margin-top:2px; font-size: .7em; text-align:center;}  #booktextdiv span {display:none}  *(omitted tabs css clairity)* 

there couple of problems going on here. think main being selectors using access click on book , text doesn't appear linked book gallery item in way.

i have modified code here

the basic changes html:

<dl class="gallery" rel="one"> 

add rel="blahh" dl of each book, correspond text div

<div class="bkcontent" id="one"> 

add id="blah" div contains text book

the jquery changes:

$("#bookimggallery  dt").click(function() {     $(".bkcontent").hide();     var textid = $(this).parent('dl').attr('rel');     $('#'+textid).slidetoggle(500);  }); 

the selector selects dt's within div id="bookimggallery"

it gets id rel="blah", slidetoggles it.

without rearranging code layout how this.