Question

What I’m trying to do is independently slidetoggle text divs under a row of images when those images – in a dl/dt gallery – are clicked, like so:

But of course I’m doing at least a few things wrong. Could be complicated that the markup is in a jQuery Tab, but that may not be the case. jsfiddle here: http://jsfiddle.net/Yfs2V/8/

I think the function is 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 for clairity)*

Answer 1

There are a couple of problems going on here. I think the main being the selectors you are using to access the click on the book and also its text doesn’t appear to be linked to the book gallery item in any way.

I have modified your code slightly here

The basic changes are HTML:

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

Add a rel="blahh" to the dl of each book, this will correspond to the text div

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

Add an id="blah" to the div that contains the text for the book

The jQuery changes:

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