Get rid of indents

Question

There are links when you click on them, the block opens and after the opening there is an indent if there is little text.

$('a.plus').click(function(){ var noteHeight = $('.note').height(); var next = $(this).next(); next.toggleClass("open"); if(next.hasClass("open")) { next.css({'height': noteHeight}); } else { next.css({'height': 0}); } return false; });

https://jsfiddle.net/Zkolya_linkoln/gs118p1d/2/

I suppose it’s necessary here instead

 var noteHeight = $('.note').height();

something like that

  var noteHeight = $(this).find('.note').height();

But not working

Do you want the block to be given a value if the text is not enough?

Ihor tkachuk ihor tkachuk 1,251 one 6 eleven · Accepted Answer · 2016-03-20T15:17:55

Replace:

 var noteHeight = $('.note').height();

on

 var noteHeight = $(this).next().children().height();

Example:

 $('a.plus').click(function() { var noteHeight = $(this).next().children().height(); var next = $(this).next(); next.toggleClass("open"); if (next.hasClass("open")) { next.css({ 'height': noteHeight }); } else { next.css({ 'height': 0 }); } return false; });

 .more { overflow: hidden; height: 10px; transition: .3s; } .open { height: auto; transition: .3s; } .note { background: #22dd66; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="plus">ссылка</a> <div class="more"> <div class="note"> <p>Федеральный закон от 02.05.2015 N 122-ФЗ</p> <p>"О внесении изменений в Трудовой кодекс Российской Федерации и статьи 11 и 73 Федерального закона "Об образовании в Российской Федерации"</p> <p>Начало действия документа - 01.07.2016</p> <p>Приказом Минтруда России от 19 октября 2015 г. N 728н утвержден профессиональный стандарт "Аудитор". Этот документ представляет собой характеристику квалификации, необходимой работнику для осуществления аудиторской деятельности и оказания прочих связанных с ней услуг.</p> <p>Приказом Минтруда России от 19 октября 2015 г. N 728н утвержден профессиональный стандарт "Аудитор". Этот документ представляет собой характеристику квалификации, необходимой работнику для осуществления аудиторской деятельности и оказания прочих связанных с ней услуг.</p> </div> </div> <a class="plus">ссылка</a> <div class="more"> <div class="note"> <p>Федеральный закон от 02.05.2015 N 122-ФЗ</p> <p>Приказом Минтруда России от 19 октября 2015 г. N 728н утвержден профессиональный стандарт "Аудитор". Этот документ представляет собой характеристику квалификации, необходимой работнику для осуществления аудиторской деятельности и оказания прочих связанных с ней услуг.</p> </div> </div> <a class="plus">ссылка</a> <div class="more"> <div class="note"> <p>Федеральный закон от 02.05.2015 N 122-ФЗ</p> <p>Приказом Минтруда России от 19 октября 2015 г. N 728н утвержден профессиональный стандарт "Аудитор". Этот документ представляет собой характеристику квалификации, необходимой работнику для осуществления аудиторской деятельности и оказания прочих связанных с ней услуг.</p> </div> </div>

Answer 2 · 2016-03-20T14:44:17

 $('a.plus').click(function(){ var noteHeight = $(this).find('.note').height(); var next = $(this).next(); next.toggleClass("open"); if(next.hasClass("open")) { next.css('height', noteHeight+'px'); } else { next.css({'height': 0}); } return false; });

var noteHeight = $ (this) .find ('. note'). height (); - find out the height of a particular block

next.css ('height', noteHeight + 'px'); - height assignment

In this case, the smoothness of the transition disappears and it works 1 time, if you close it, it will not open again

Answer 3 · 2016-03-20T14:50:47

The script does not make sense since there is a simpler solution: Leaving the tab open script:

 $('a.plus').click(function(){ var next = $(this).next(); next.toggleClass("open"); });

Change CSS:

 .more {overflow:hidden;transition:1s;height:auto;max-height:10px;} .open {max-height: 999px;transition:1s;} .note{background:#22dd66;height: auto;}

Here is an example on JSFIDDLE: https://jsfiddle.net/gs118p1d/15/

Edit: added min-height: 0 for transition animation.

There is an indent anyway, and the min-height:200px; variant is not fixed min-height:200px;
@zkolya I have specified min-height, this means the minimum height.
You wanted to remove the indent, and I added it specifically thinking that you need it.
Wait, I'm confused about something, this is how super work is .open {height:auto;transition:.3s;} but then everything

Get rid of indents

3 answers 3

More articles: