CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Coolguy
Coolguy

Reputation: 2285

Jquery slideToggle() to a certain height?

I have tried the below coding to slide my div up and down:

$("#toggle").click(function(e) {
    e.preventDefault();
    $("#numbers").slideToggle();
});

How do we let it to only slide until certain height for example half of my div?

Upvotes: 2

Views: 5654

Answers (3)

joe_young
joe_young

Reputation: 4125

Try this, using .css() to find out whether the element is hidden or not (if its height = "100px" or "0px"), then animating the height:

$("#toggle").click(function(e) {
    e.preventDefault();
    if ($("#numbers").css("height") == "0px") {
        $("#numbers").animate({"height": "200px"}, 800);
    }
    else if ($("#numbers").css("height") == "200px") {
        $("#numbers").animate({"height": "0px"}, 800);
    }
});

https://jsfiddle.net/jofish999/d6pr2sop/

Upvotes: 1

Vincent Decaux
Vincent Decaux

Reputation: 10714

You can use CSS and addClass :

 $("#toggle").click(function(e) {
     e.preventDefault();
     $("#numbers").slideToggle().addClass('height50');
 });

Here is the fiddle : http://jsfiddle.net/fv8ta0q8/

Upvotes: 1

Shirin Abdolahi
Shirin Abdolahi

Reputation: 1067

you can't do this by slideToggle function. but you can use animate function.here if a plunker

when your button is clicked. a class name toggled is add to your div(with id numbers) and it's height shrunk to 100px for example. when button clicked again.because your div has toggled class, it's height gets 200px and toggled class removed from it.

   $("#toggle").click(function(e) {
     e.preventDefault();
      if($("#numbers").hasClass("toggled")) {
         $("#numbers").animate({"height": "200px"}).removeClass("toggled");
      } else {
        $("#numbers").animate({"height": "100px"}).addClass("toggled");
      }
   });

Upvotes: 5

Related Questions