By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,652 Members | 1,451 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,652 IT Pros & Developers. It's quick & easy.

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

ilya Kraft
P: 134

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
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

Expand|Select|Wrap|Line Numbers
  1. $(function(){
  3. // The height of the content block when it's not expanded
  4. var adjustheight = 80;
  5. // The "more" link text
  6. var moreText = "More";
  7. // The "less" link text
  8. var lessText = "Less";
  10. // Sets the .more-block div to the specified height and hides any content that overflows
  11. $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
  13. // The section added to the bottom of the "more-less" div
  14. $(".more-less").append('<p class="continued">[&hellip;]</p><a href="#" class="adjust"></a>');
  16. $("a.adjust").text(moreText);
  18. $(".adjust").toggle(function() {
  19.         $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
  20.         // Hide the [...] when expanded
  21.         $(this).parents("div:first").find("p.continued").css('display', 'none');
  22.         $(this).text(lessText);
  23.     }, function() {
  24.         $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
  25.         $(this).parents("div:first").find("p.continued").css('display', 'block');
  26.         $(this).text(moreText);
  27. });
  28. });
I tried to change toggle function from line 18 to this.
Expand|Select|Wrap|Line Numbers
  1. $(".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
May 10 '11 #1
Share this Question
Share on Google+
3 Replies

P: 270
try slideup and slidedown jquery functions

Expand|Select|Wrap|Line Numbers
  1. $(this).parents("div:first").find("p.continued").slideUp();//line 21
Expand|Select|Wrap|Line Numbers
  1. $(this).parents("div:first").find("p.continued").slideDown("slow");//line 25
May 11 '11 #2

ilya Kraft
P: 134

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.

Expand|Select|Wrap|Line Numbers
  1. $(this).parents("div:first").find(".more-block").slideDown("slow").css('height', 'auto').css('overflow', 'visible'); //line 19
  2. $(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. Please visit it maybe you will understand the problem.
May 11 '11 #3

ilya Kraft
P: 134

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

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

Expand|Select|Wrap|Line Numbers
  1. $(function(){
  2. var adjustheight = 95;
  3. var moreText = "More";
  4. var lessText = "Less";
  5. $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden').slideDown("slow");
  6. $(".more-less").append('<p class="continued">[&hellip;]</p><a href="#" class="adjust"></a>');
  7. $("a.adjust").text(moreText);
  8. $(".adjust").toggle(function() {
  9.         $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible').slideDown("slow");
  10.         $(this).parents("div:first").find("p.continued").css('display', 'none');
  11.         $(this).text(lessText);
  12.     }, function() {
  13.         $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
  14.         $(this).parents("div:first").find("p.continued").css('display', 'block');
  15.         $(this).text(moreText);
  16. });
  17. });
May 12 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.