jQuery slideToggle Strange problem. Please help
Hey guys,
i have a big problem with the jquery.
I hope a get helped in this forum.
I have in my content area 4 titles. When you click on them, each has a description which slides down.
So for one title one description.
I have now 2 scripts which I tested.
One script is nice for having more than one sliding divs, but here I have the problem that the height isn't correctly calculated and therefore the div slides not correctly.
Here is script 1:
$(document).ready(function(){
// Get height of all des before hide() occurs. Store height in heightArray, indexed based on the de's position.
heightArray = new Array();
$("div.d_show_hide .de").each(function(i) {
theHeight = $(this).height();
heightArray[i] = theHeight;
});
// Hide all des
$("div.d_show_hide .de").hide();
// When a tt is clicked,
$("div.d_show_hide .tt").click(function () {
// Based on the tt's position in the div, retrieve a height from heightArray, and re-assign that height to the sibling de.
$(this).next("div.d_show_hide .de").css({height: heightArray[$("div.d_show_hide .tt").index(this)]});
// Toggle the divideVisibility of the de directly after the clicked de
$(this).next("div.d_show_hide .de").slideToggle("slow");
});
});
The other script calculates the height better but not perfect.
But here I have the problem, that the script is only for one div. Which means that when I apply the code for my page it slides all divs at the same team which i don't want.
Here script 2:
$(document).ready(function(){
var $div = $('div.d_show_hide .de');
var height = $div.height();
$div.hide().css({ height : 0 });
$('div.d_show_hide .tt').click(function () {
if ( $div.is(':visible') ) {
$div.animate({ height: 0 }, { duration: 2500, complete: function () {
$div.hide();
}
});
} else {
$div.show().animate({ height : height }, { duration: 2500 });
}
return false;
});
});
I hope someone of you can help me out of this dilemma.
It shouldn't be that hard.
My page it accessible here:
http://www.haus-plan.de/_01_Hausplan/
you can see the html, css, and also the js in firefox.
I wait for you tips.
Thanks
3dealism