6 Replies Latest reply: Apr 19, 2014 11:48 PM by osgood_ RSS

    Possible to toggle/animate between 2 sizes using jQuery 2.1.0?

    hinc94 Community Member

      I have a button and a div, just want to change the height of the div between 100px to 200px when click on that button, is it possilbe? I tried to google it but those codes only work on the older version of jquery but not 2.1.0.

        • 1. Re: Possible to toggle/animate between 2 sizes using jQuery 2.1.0?
          osgood_ MVP

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

          <html>

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

          <title>Untitled Document</title>

          <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0-rc1/jquery.min.js"></script>

          <script>

          $(document).ready(function(){

          $('h1').css('cursor' , 'pointer').click(function() {

              var toggleHeight = $("#toggleHeight").height() == 200 ? "100px" : "200px";

              $("#toggleHeight").animate({ height: toggleHeight });

          });

          });

          </script>

          <style>

          #toggleHeight {

              height: 100px;

              background-color: red;

          }

          </style>

          </head>

           

          <body>

           

          <h1>Heading</h1>

          <div id="toggleHeight">Toggle the box height by clicking the heading above</div>

           

          </body>

          </html>

          • 2. Re: Possible to toggle/animate between 2 sizes using jQuery 2.1.0?
            hinc94 Community Member

            Thank you, it's really helpful! How to change the speed of the animation?

            • 3. Re: Possible to toggle/animate between 2 sizes using jQuery 2.1.0?
              osgood_ MVP

              Add the speed as marked in red:

               

              $("#toggleHeight").animate({ height: toggleHeight }, 100);

              • 5. Re: Possible to toggle/animate between 2 sizes using jQuery 2.1.0?
                hinc94 Community Member

                If I have 4 butttons in one page, each button will increase the div height by 40px and decrease the height by 40px when on click, then collaspe when I click on it again, do you know how to do this as well? From your answer, there is a fixed height, then increase to another height when on click. But for this, I don't have a fix height once the first button being clicked.

                 

                For instance, the original height of the main div is 100px, when  I click the first button, it increases 40px, when I click the second button, it increases 40px again. So if I click all 4 buttons, it increases in total 160px of the div to  260px. If I click on any of the buttons again, it decreases the height of the div by 40px. If I click 4 all it again, it decreases by 160px of the main div. The script above is the changes between 2 fixed heights, but for this there is no fixed height once any of the button being clicked.

                • 6. Re: Possible to toggle/animate between 2 sizes using jQuery 2.1.0?
                  osgood_ MVP

                  hinc94 wrote:

                   

                  For instance, the original height of the main div is 100px, when  I click the first button, it increases 40px, when I click the second button, it increases 40px again. So if I click all 4 buttons, it increases in total 160px of the div to  260px. If I click on any of the buttons again, it decreases the height of the div by 40px. If I click 4 all it again, it decreases by 160px of the main div. The script above is the changes between 2 fixed heights, but for this there is no fixed height once any of the button being clicked.

                   

                  <!DOCTYPE HTML>

                  <html>

                  <head>

                  <meta charset="UTF-8">

                  <title>Untitled Document</title>

                  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0-rc1/jquery.min.js"></script>

                  <script>

                  $(document).ready(function(){

                  var counter = 0;   

                  $('.button, .counter').css('cursor' , 'pointer').click(function() {

                  if (counter > 7) {

                  counter = 0;

                  }

                  counter++;                                                                                                                                                                                                                 

                  var height = $("#height").height();

                  if (counter > 0 && counter < 5) {

                  height = height + 40;

                  }

                  else if (counter > 4 && counter < 9) {

                  height = height - 40;

                  }

                   

                  $("#height").animate({ height: height }, 100);

                   

                   

                  });

                  });

                  </script>

                  <style>

                  body {

                      font-family: verdana;

                      font-size: 14px;

                  }

                  #height {

                      height: 100px;

                      background-color:#CCC;

                      padding: 15px;

                      border-radius: 6px;

                      clear: both;

                  }

                  h2 {

                      float: left;

                      margin: 0 0 12px 15px;

                      background-color:#CCC;

                      padding: 8px;

                      border-radius: 6px;

                      color: #fff;

                      font-size: 18px;

                      font-family: verdana;

                      font-weight: normal;

                  }

                  </style>

                  </head>

                   

                  <body>

                   

                  <h2 class="button counter">Button 1</h2><h2 class="button">Button 2</h2><h2 class="button">Button 3</h2><h2 class="button">Button 4</h2>

                  <div id="height">Resize the box height by clicking the buttons above</div>

                   

                   

                  </body>

                  </html>