Change jQuery function from hover to slideToggle

With help from SOers, I was able to make more efficient a hover and fadein/fadeout function to show text divs under this image layout. But I'd like to work with slideToggle because with hover, the text flickers and the divs bounce. How would I adapt this function to use slideToggle where the toggle requires a click on each image?

jsfiddle: http://jsfiddle.ne开发者_C百科t/Ckrtu/11/

This is an image of what I'm trying to do:

This is the old hover function

$(document).ready(function() {
    $("#imagegallerydiv").delegate("dt[class]", "hover", function(e) {
        if (e.type === "mouseenter") {
            var index = $(this).parent().index();
            $("#wide-text-div-under-all-images div").eq(index).fadeIn('fast');
        }
        if (e.type === "mouseleave") {
            var index = $(this).parent().index();
            $("#wide-text-div-under-all-images div").eq(index).fadeOut('fast');
        }
    });
});

CSS:

#imagegallerydiv {width: 700px; height:200px; margin:5px; text-align: center;}

dl.gallery {width: 97px; text-align: center; float: left;}

.gallery dt {width: 80px; margin-top:2px; font-size: .7em; text-align:center;}

#wide-text-div-under-all-images div {display: none;}

HTML:

<div id="imagegallerydiv">

   <dl class="gallery"><dt class="imgone"><img alt="img" src="one.jpg"></dt>
   <dt>Image Title One</dt></dl>

   <dl class="gallery"><dt class="imgtwo"><img alt="img" src="two.jpg"></dt>
   <dt>Image Title Two</dt></dl>

   <dl class="gallery"><dt class="imgthree"><img alt="img" src="three.jpg"></dt>
   <dt>Image Title Three</dt></dl>

   <dl class="gallery"><dt class="imgfour"><img alt="img" src="four.jpg"></dt>
   <dt>Image Title Four</dt></dl>

 <dl class="gallery"><dt class="imgfive"><img alt="img" src="four.jpg"></dt>
   <dt>Image Title Five</dt></dl>

</div>

<div id="wide-text-div-under-all-images">

     <div class="textone">Lorem Ipsum One</div>

     <div class="texttwo">Lorem Ipsum Two</div>

     <div class="textthree">Lorem Ipsum Three</div>

     <div class="textfour">Lorem Ipsum Four</div>

     <div class="textfive">Lorem Ipsum Five</div>

</div>

---

http://jsfiddle.net/samccone/z83Kx/

I think this example is much simpler to understand and fits the desired outcome better then what you were using before.

Just set the text that you want to show as an attr within the div that is to be clicked

<dl class="gallery"><dt class="imgthree" to_show='this is text3'><img alt="img" src="http://www.placehold.it/75x100"></dt>

hope that this helps

---

you may want to use this.

$(document).ready(function() {
    var $textUnderImage = $("#wide-text-div-under-all-images div");
    $('dt[class]').toggle(
        // first function fired on first click
        function() {
            var index = $(this).parent().index();
            if($textUnderImage.is(":visible")) {
                $textUnderImage.fadeOut('fast');
            }
            $("#wide-text-div-under-all-images div").eq(index).fadeIn('fast');
        },
        // second function fired on second click
        function() { 
            var index = $(this).parent().index();
            $("#wide-text-div-under-all-images div").eq(index).fadeOut('fast');
        }
    );

The first function will show the text on first click, and the second function will hide the text on second click and so on...

toggle method will fire the functions inside it sequentially. So each time you click the handler, one method after the other is processed once. You can add as much as many function inside a toggle method and each function will be executed on each click sequentially.