Hello, started learning jquery. I write the first plug-in "Read more", that is, I want the block initially to be 15px high, and when I click on the link, the animation block opens completely, and when I press the button again, the block collapses.

This is what I came to (I ask you not to shout that the stash, etc.)

 <script type="text/javascript"> $(document).ready(function(){ $('#show_more').toggle( function(){ $("#show_desc").animate({ height: auto }, 500 ); $('#show_more').text('Свернуть'); }, function(){ $("#show_desc").animate({ height: '15px' }, 500 ); $('#show_more').text('Читать далее'); } ) }); </script> <a href="#" id="show_more">Свернуть</a> <div id="show_desc" style="height: 15px;">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>

But something is somehow wrong :) Glad to hear your options or amendments.

    2 answers 2

    height: "auto" - need in quotes

     <script type="text/javascript"> $(document).ready(function(){ $('#show_more').toggle( function(){ $("#show_desc").animate({ height: "15px" }, 500 ); $('#show_more').text('Свернуть'); }, function(){ $("#show_desc").animate({ height: $("#inner").height()+'px' }, 500 ); $('#show_more').text('Читать далее'); } ) }); </script> <a href="#" id="show_more">Свернуть</a> <div id="show_desc" style="height: 15px;overflow:hidden"><div id="inner">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div></div>
    • only auto is not very suitable here, because after height: '15px' - auto will be 15px - Maksym Prus
    • As it does not work correctly. with one click, the entire text disappears immediately and immediately appears - dogmar
    • It is better to use an external block - but rather relative to it and take height. - Maksym Prus
    • Can you edit my code? =) - dogmar
    • Thanks, only in your example of the function in toggle, I swapped :) and everything is fine. - dogmar

    overflow: hidden; You help! When you click to expand, for height it is better to set an empty value, and remove overflow . When you click to minimize all return to original!