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

Share Improve this question Follow edited Aug 5, 2015 at 10:06 Cerlin 6,72211 gold badge2222 silver badges2929 bronze badges asked Aug 5, 2015 at 8:54 CoolguyCoolguy 2,2851212 gold badges5656 silver badges8181 bronze badges 7

• 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

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 5

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/