How to modify toggle function to slideToggle in the following script?

[ilya Kraft]

Hello,

Quick problem here. On my website I have a button. When user clicks on the button it expands div. you can se how it works here http://inelmo.com/noluck/
As you can see div expands instantly. I want it to slide down. Here is the full .JS file I use for that div
toggle function starts on line 18

$(function(){
 
// The height of the content block when it's not expanded
var adjustheight = 80;
// The "more" link text
var moreText = "More";
// The "less" link text
var lessText = "Less";
 
// Sets the .more-block div to the specified height and hides any content that overflows
$(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
 
// The section added to the bottom of the "more-less" div
$(".more-less").append('<p class="continued">[&hellip;]</p><a href="#" class="adjust"></a>');
 
$("a.adjust").text(moreText);
 
$(".adjust").toggle(function() {
		$(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
		// Hide the [...] when expanded
		$(this).parents("div:first").find("p.continued").css('display', 'none');
		$(this).text(lessText);
	}, function() {
		$(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
		$(this).parents("div:first").find("p.continued").css('display', 'block');
		$(this).text(moreText);
});
});

I tried to change toggle function from line 18 to this.

$(".adjust").slideToggle(1000)(function() {

but this resulted in that the toggle function started automatically and hided the More / Less Button.

If anyone has any ideas on how to achieve this effect please help me )))

Thank You

[NitinSawant]

try slideup and slidedown jquery functions

$(this).parents("div:first").find("p.continued").slideUp();//line 21

$(this).parents("div:first").find("p.continued").slideDown("slow");//line 25

[ilya Kraft]

Hi,

Thnx for reply I tried to add this to script, but It doesn't work properly, I added it to lines 19 and 24 because I need to slide (more-block). Here is what I did.

$(this).parents("div:first").find(".more-block").slideDown("slow").css('height', 'auto').css('overflow', 'visible'); //line 19
$(this).parents("div:first").find(".more-block").slideUp().css('height', adjustheight).css('overflow', 'hidden'); //line 24

I tried to change them in places, but it did not work either. I will leave it like this on my web page so you can see what's wrong. http://inelmo.com/noluck/ Please visit it maybe you will understand the problem.

[ilya Kraft]

Hello,

I modified a script a bit, I think I am almost there, but not yet ;D What I want it to do now is only slide down when someone clicks "More" button (it should slide down more-block div) So I don't need any slide functions when someone clicks "Less" button, so only slide down functions. here is my website to see what I mean http://inelmo.com/noluck/


And here is the code, I added .slideDown function where I thought it should go, but it does nothing

$(function(){
var adjustheight = 95;
var moreText = "More";
var lessText = "Less";
$(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden').slideDown("slow");
$(".more-less").append('<p class="continued">[&hellip;]</p><a href="#" class="adjust"></a>');
$("a.adjust").text(moreText);
$(".adjust").toggle(function() {
		$(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible').slideDown("slow");
		$(this).parents("div:first").find("p.continued").css('display', 'none');
		$(this).text(lessText);
	}, function() {
		$(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
		$(this).parents("div:first").find("p.continued").css('display', 'block');
		$(this).text(moreText);
});
});