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?

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?

• javascript
• jquery
• html
• css

• Use animate(). Code: $("#toggle").click(function (e) { e.preventDefault(); //$("#wrapper").toggleClass("toggled"); $("#numbers").animate({ height: $('#myDiv').height() / 2 }); }); – Tushar Commented Aug 5, 2015 at 8:56
• Hi Tushar. You solution make it keep sliding up every time I click. How to slide down? – Coolguy Commented Aug 5, 2015 at 8:59
• for the above to work you need to handle the untoggle as well – P6345uk Commented Aug 5, 2015 at 9:00
• How to do the untoggle P6345uk? – Coolguy Commented Aug 5, 2015 at 9:01
• Personally i would apply a class using something like .switchClass( "oldClass", "newClass", 1000, "easeInOutQuad" ); – P6345uk Commented Aug 5, 2015 at 9:02

3 Answers 3

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");
      }
   });

You can use CSS and addClass :

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

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

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/jofish999/d6pr2sop/