Good day to all. Help, please, write a function to determine the height of the block. I have a block whose height I need to determine. It will have some text content of arbitrary size. By default, some height is indicated, and if the content in the block is larger than it, the "show all block" button appears (show, hide). The function must somehow get the id of the element. I have an option, but this is not a function, but not a very convenient script.

$('#full').click(function(){ $('#news1').stop().animate({height:'240px'}, 300, 'easeInCubic'); $('#full').hide("slow"); $('#smol').show("slow"); }); $('#smol').click(function(){ $('#news1').stop().animate({height:'100px'}, 300, 'easeInCubic'); $('#smol').hide("slow"); $('#full').show("slow"); });

In JS is not strong. Who can do what, tell me, please, or mb where such functions have been seen. I will read, I will understand. For any help, I will be grateful. The most important thing is that the height of the block is determined automatically and deployed to the whole block, depending on any number of contents. And the initial size was set at the beginning to some specific value or was passed by the parameter to the function itself (not very important).

  • Before you start, form the right question, it’s too much to be read, but also the same. So it’s clearer why nobody answers the question? - Artem
  • Now the question is issued. Initially, I always displayed without line breaks. - SnowMan
  • 2
    Can you finally think of pushing the button with the digits in the question editor? =) - Zowie
  • Well, now everything seems to be fine. all on their lines and the code is highlighted. I'm just rarely here, because and so it was written was karyavo :) - SnowMan
  • 2
    Normally displayed because I pressed this button for you =) - Zowie

2 answers 2

If I understand correctly, do you want to make the "Show full" button?

I did it in a simple way)

 function toVisible(name1, name2) { $(function() { $("#" + name1).slideToggle("slow"); $("#" + name2).slideToggle("slow"); }); } 
 div.article { display: none; } div.preview { display: block; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="zaglav">Article</div> <div class="article" id="article1"><br> Текст статьи <br><br> <a class="btnAr" id="butAr1" onClick="toVisible('preview1','article1')">Скрыть</a> </div> <div class="preview" id="preview1"> <br>Предпросмотр статьи <br><br> <a class="btnAr" id="butAr1" onClick="toVisible('preview1','article1')">Подробнее...</a> <div>

If you are interested of course)

  • ATP, works :) the easiest way that I found - SnowMan

$ ('selector'). height ();

  • And then how to properly use getElementById ()? I thought to get the block id through it. and the function is tied to the button to show the full news. height () as I understand it, determines the height of the element? - SnowMan
  • Well, you literally translate getElementById - it's the same "get the item by id". That is, id need to know in advance, and this is a completely different question. Most likely you have something wrong designed, if you can not decide on id. Just in case - without jq it will be like this: height = document.getElementById ('id'). OffsetHeight - oleg42
  • If you use Jquery and use it, then why write everything on JS bare? - Artem
  • I thought to write my function) So I ask for advice on how best to proceed. - SnowMan
  • A little bit of rubbing: var el = document.getElementById ("id") // faster $ ("# id") // + function omg (elId) {var el = $ ("#" + elId) / IMHO - looks terrible / } function omg (elId) {var el = document.getElementById (elId)} // and there are many bucaff =) // the only thing that climbs into the head and does not violate // my aesthetic acceptance is something like getElById = document.getElementById ; // that's suucks, but ... function omg (elId) {var el = getElById (id)} // but it's nice = \ Thank you for your attention: DDD - Zowie