I watched a lesson on jQuery and there was an example with an increase in the content-box on click. Then I decided to make a second click on the example toggle (so that the content-box would accept the old dimensions if you click on it a second time). But he came up with only the option of adding a variable. It is right ? or is there a better solution?

$(document).ready(function () { var one = 1; $(".content-box").click(function() { if(one == 1){ one = 2; $(".content-box").animate({ width: '500px', height: '300px' }, 1000); $(".content-after").show().animate({ opacity: 1 }); }else if(one == 2){ one = 1; $(".content-box").animate({ width: '240px', height: '70px' }, 500); $(".content-after").hide().animate({ opacity: 0 }); } }); }); 
 html, body, ul, li { margin: 5px; padding: 5px; } .content-box { width: 240px; height: 70px; background: dodgerblue; padding: 15px; border-radius: 8px; } .content-before { font-size: 24px; text-align: center; } .content-after { display: none; font-size: 18px; opacity: 0; color: #ffffff; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content-box"> <p class="content-before">Click me to show more !</p> <p class="content-after"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci assumenda debitis error maxime molestias quae quasi reiciendis vero voluptatem? Amet aperiam commodi, cum debitis dolor dolorem doloremque dolores dolorum ducimus esse excepturi facere in iure maiores necessitatibus nesciunt nihil, nobis pariatur perspiciatis porro quia quisquam quo quod quos ratione! </p> </div>

    2 answers 2

    First, magic with one==1/one==2 not needed. If you really want to do magic, then set the value to true/false and change one = !one;

    Secondly, Jquery has a toggleclass function, use it tritely to change the class (add / remove).

    Thirdly, write all classes with animation and necessary properties in CSS , and in toggleclass just change the class through toggleclass

      It is not necessary to determine the state of the block by checking the variable (in your case one). It is enough to check for the presence / absence of a class, for example, .opened , and add / remove it through toggleClass() .

      All animation is much easier to describe in CSS, then it will be much easier to change (if necessary), use media queries.

      It is not necessary to set the height of the drop-down block, the functions slideDown() / slideUp() / slideToggle() will determine it itself.

      As for me, opening / closing a block is best done with a click not on the entire block, but on a specific trigger (in your case the .content-before header), but this is my subjective opinion, of course, you decide.

      Slightly universalized your example in case there are several such drop-down blocks.

       $(document).ready(function() { $('.content-before').click(function() { var block = $(this).closest('.content-box'); if (!block.hasClass('opened')) { block.find(".content-after").slideDown(1000); } else { block.find(".content-after").slideUp(500); } block.toggleClass('opened'); }); }); 
       html, body, ul, li { margin: 5px; padding: 5px; } * { box-sizing: border-box; } .content-box { width: 240px; background: dodgerblue; border-radius: 8px; transition: width 0.5s; padding: 15px; } .content-before { font-size: 24px; text-align: center; } .content-after { display: none; font-size: 18px; opacity: 0; color: #ffffff; transition: opacity 1s; width: 470px; } .content-box.opened { width: 500px; transition: width 1s; } .content-box.opened .content-after { opacity: 1; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content-box"> <p class="content-before">Click me to show more !</p> <p class="content-after"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci assumenda debitis error maxime molestias quae quasi reiciendis vero voluptatem? Amet aperiam commodi, cum debitis dolor dolorem doloremque dolores dolorum ducimus esse excepturi facere in iure maiores necessitatibus nesciunt nihil, nobis pariatur perspiciatis porro quia quisquam quo quod quos ratione! </p> </div>

      If the speed of opening / opening is the same, then the code can be reduced to this option:

       $(document).ready(function() { $('.content-before').click(function() { var block = $(this).closest('.content-box'); block.toggleClass('opened'); block.find('.content-after').slideToggle(1000); }); }); 
       html, body, ul, li { margin: 5px; padding: 5px; } * { box-sizing: border-box; } .content-box { width: 240px; background: dodgerblue; border-radius: 8px; transition: width 1s; padding: 15px; } .content-before { font-size: 24px; text-align: center; } .content-after { display: none; font-size: 18px; opacity: 0; color: #ffffff; transition: opacity 1s; width: 470px; } .content-box.opened { width: 500px; } .content-box.opened .content-after { opacity: 1; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content-box"> <p class="content-before">Click me to show more !</p> <p class="content-after"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci assumenda debitis error maxime molestias quae quasi reiciendis vero voluptatem? Amet aperiam commodi, cum debitis dolor dolorem doloremque dolores dolorum ducimus esse excepturi facere in iure maiores necessitatibus nesciunt nihil, nobis pariatur perspiciatis porro quia quisquam quo quod quos ratione! </p> </div>