Animuj element do automatycznej wysokości za pomocą jQuery

171

Chcę ożywić <div>od 200pxdo autowysokości. Jednak nie wydaje mi się, żeby to działało. Czy ktoś wie jak?

Oto kod:

$("div:first").click(function(){
  $("#first").animate({
    height: "auto"
  }, 1000 );
});
Daniel
źródło
14
Najlepszą odpowiedź należy oznaczyć jako zaakceptowaną.
kleinfreund
@IanMackinnon to pytanie z pewnością ma lepsze odpowiedzi. Zamknąłem to pytanie jako jego duplikat.
Madara's Ghost

Odpowiedzi:

254
  1. Zapisz aktualną wysokość:

    var curHeight = $('#first').height();
  2. Tymczasowo przełącz wysokość na automatyczną:

    $('#first').css('height', 'auto');
  3. Uzyskaj automatyczną wysokość:

    var autoHeight = $('#first').height();
  4. Przełącz się z powrotem curHeighti animuj do autoHeight:

    $('#first').height(curHeight).animate({height: autoHeight}, 1000);

I razem:

var el = $('#first'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000);
David Tang
źródło
@Daniel, gdzie jest twój kod JS? Opublikuj ten fragment, a także części kodu HTML, które pokazują elementy, do których się odnosisz.
David Tang
21
To działa, ale dodałem wywołanie zwrotne, które przywraca zachowanie automatycznego wzrostu elementu .animated({height: autoHeight}, 1000, function(){ el.height('auto'); });
rg89
Uważaj na ustawianie stałych wysokości w responsywnych projektach. Zmienia się w bałagan, jeśli użytkownik zmieni rozmiar ekranu. Najlepiej ustawić wysokość na „auto” po zakończeniu animacji.
Jonathan Tonge
4
Może to spowodować FOUC. Użytkownik może zobaczyć, jak element przeskakuje do pełnej wysokości na ułamek sekundy przed animacją.
Dingredient
1
Możesz zapobiec FOUC („flashowaniu niestylowanej treści”), początkowo podając element opacity: 0; position: absolute;podczas pomiaru i usuwając go, gdy skończysz.
JacobEvelyn
194

IMO to najczystsze i najłatwiejsze rozwiązanie:

$("#first").animate({height: $("#first").get(0).scrollHeight}, 1000 );

Wyjaśnienie: DOM już wie z początkowego renderowania, jaki rozmiar będzie miał rozwinięty element div po ustawieniu automatycznej wysokości. Ta właściwość jest przechowywana w węźle DOM jako scrollHeight. Musimy tylko pobrać element DOM z elementu jQuery przez wywołanie get(0)i wtedy możemy uzyskać dostęp do właściwości.

Dodanie funkcji zwrotnej w celu ustawienia wysokości na auto pozwala na większą responsywność po zakończeniu animacji (kredyt chris-williams ):

$('#first').animate({
    height: $('#first').get(0).scrollHeight
}, 1000, function(){
    $(this).height('auto');
});
Liquinaut
źródło
2
Niesamowity! Według developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight jest on nawet obsługiwany w IE8, w porównaniu do clientHeight, który wydaje się być nieobsługiwany: developer.mozilla.org/en-US/docs/Web/ API / Element.clientHeight
Sven
1
Margines jest z definicji modelem pudełkowym, a nie częścią wysokości obiektu. Zawsze możesz jednak dodać margines samodzielnie.
Liquinaut
22
Powinna to być akceptowana odpowiedź, ponieważ działa najlepiej bez migotania i naprawdę dobrze spełnia swoje zadanie
Einius
7
Myślę też, że to najlepsze rozwiązanie. Dodałbym do tego funkcję zwrotną, aby ustawić wysokość na automatyczną, aby uzyskać większą responsywność. $('#first').animate({ height: $('#first').get(0).scrollHeight }, 1000, function() { $(this).height('auto'); });
Chris Williams
1
Wow, to jest super eleganckie. Działa również z scrollWidthanimacjami szerokości.
nils
24

Jest to w zasadzie to samo podejście, co odpowiedź Box9, ale zapakowałem ją w ładną wtyczkę jquery, która przyjmuje te same argumenty, co zwykły animowany , gdy potrzebujesz więcej animowanych parametrów i masz dość powtarzania tego samego kodu w kółko :

;(function($)
{
  $.fn.animateToAutoHeight = function(){
  var curHeight = this.css('height'),
      height = this.css('height','auto').height(),
      duration = 200,
      easing = 'swing',
      callback = $.noop,
      parameters = { height: height };
  this.css('height', curHeight);
  for (var i in arguments) {
    switch (typeof arguments[i]) {
      case 'object':
        parameters = arguments[i];
        parameters.height = height;
        break;
      case 'string':
        if (arguments[i] == 'slow' || arguments[i] == 'fast') duration = arguments[i];
        else easing = arguments[i];
        break;
      case 'number': duration = arguments[i]; break;
      case 'function': callback = arguments[i]; break;
    }
  }
  this.animate(parameters, duration, easing, function() {
    $(this).css('height', 'auto');
    callback.call(this, arguments);
  });
  return this;
  }
})(jQuery);

edit: teraz można łączyć w łańcuchy i czyścić

w0ps
źródło
23

Lepsze rozwiązanie nie polegałoby na JS do ustawiania wysokości elementu. Poniżej przedstawiono rozwiązanie, które animuje element o stałej wysokości do pełnej („automatycznej”) wysokości:

var $selector = $('div');
    $selector
        .data('oHeight',$selector.height())
        .css('height','auto')
        .data('nHeight',$selector.height())
        .height($selector.data('oHeight'))
        .animate({height: $selector.data('nHeight')},400);

https://gist.github.com/2023150

Tim Hettler
źródło
2
Ten oneliner nie jest łatwy do zrozumienia, może napisanie kilku linijek pomogłoby innym trochę lepiej.
Jaap
Jest to najlepsze rozwiązanie, ponieważ wysokość automatycznej może się zmienić, jeśli użytkownik dostosuje rozmiar okna. Zobacz: // animuje wysokość funkcji filtrów toggleSlider () {if ($ ('# filtry'). Height ()! = 0) {$ ('# filtry'). Animate ({height: '0 '}); } else {var $ selector = $ ('# filtry'); $ selector .data ('oHeight', $ selector.height ()) .css ('height', 'auto') .data ('nHeight', $ selector.height ()) .height ($ selector.data (' oHeight ')) .animate ({height: $ selector.data (' nHeight ')}, 400); }; console.log ('agg'); }
Ricky
Działa, aby otworzyć div, ale nie animuje przez ponad 400 ms. Może mam coś innego ustawione inaczej, ale po prostu otwiera się w mgnieniu oka.
ntgCleaner
Działa, ale ustawia heightto stałą wartość (np. 122px). Mój element po chwili zmienił wysokość, więc musiałem zastąpić argument duration (400) opcjami{duration: 400, complete: function() {$selector.css('height', 'auto');}}
jsruok
12

to działa i jest prostsze niż wcześniejsze rozwiązania:

CSS:

#container{
  height:143px;  
}

.max{
  height: auto;
  min-height: 143px;
}

JS:

$(document).ready(function() {
    $("#container").click(function() {      
        if($(this).hasClass("max")) {
            $(this).removeClass("max");
        } else {
            $(this).addClass("max");
        }

    })
});

Uwaga: to rozwiązanie wymaga interfejsu użytkownika jQuery

czLukasss
źródło
1
Należy wspomnieć, że wymaga to wtyczki Jquery UI, podczas gdy pierwotne pytanie dotyczyło samego jquery. Ale jeśli używasz interfejsu użytkownika Jquery, to działa.
user56reinstatemonica8
4
możesz też użyć $ (this) .toggleClass ('max', 250); zamiast używać instrukcji if
Antoine Hedgecock
1
dlaczego dodajesz drugą wartość do .addClassi .removeClass?
bowl0stu
9
var h = document.getElementById('First').scrollHeight;
$('#First').animate({ height : h+'px' },300);
Ignacio Martínez
źródło
7

Zawsze możesz zawinąć elementy potomne #first i zapisać wysokość otoki jako zmienną. To może nie być najładniejsza lub najbardziej skuteczna odpowiedź, ale to załatwia sprawę.

Oto skrzypce, w których zawarłem reset.

ale do twoich celów, oto mięso i ziemniaki:

$(function(){
//wrap everything inside #first
$('#first').children().wrapAll('<div class="wrapper"></div>');
//get the height of the wrapper 
var expandedHeight = $('.wrapper').height();
//get the height of first (set to 200px however you choose)
var collapsedHeight = $('#first').height();
//when you click the element of your choice (a button in my case) #first will animate to height auto
$('button').click(function(){
    $("#first").animate({
        height: expandedHeight            
    })
});
});​
Usha
źródło
5

Użyj slideDown i slideUp

$("div:first").click(function(){ $("#first").slideDown(1000); });
Ronny Sherer
źródło
1
To nie rozwiązuje problemu z wysokością: funkcja auto, ponieważ slideUp całkowicie zwinie element div.
Jaap
5

Udało mi się to naprawić: D tutaj kod.

var divh = document.getElementById('first').offsetHeight;
$("#first").css('height', '100px');
$("div:first").click(function() {
  $("#first").animate({
    height: divh
  }, 1000);
});
Daniel
źródło
4

Możesz sprawić, by odpowiedź Liquinaut reagowała na zmiany rozmiaru okna, dodając wywołanie zwrotne, które ustawia wysokość z powrotem na auto.

$("#first").animate({height: $("#first").get(0).scrollHeight}, 1000, function() {$("#first").css({height: "auto"});});
Cyl
źródło
4

Zasadniczo automatyczna wysokość jest dostępna tylko po wyrenderowaniu elementu. Jeśli ustawisz stałą wysokość lub Twój element nie jest wyświetlany, nie możesz uzyskać do niego dostępu bez żadnych sztuczek.

Na szczęście jest kilka sztuczek, których możesz użyć.

Sklonuj element, wyświetl go poza widokiem, nadaj mu wysokość auto i możesz go pobrać z klonu i użyć później jako głównego elementu. Używam tej funkcji i wydaje się, że działa dobrze.

jQuery.fn.animateAuto = function(prop, speed, callback){
    var elem, height, width;

    return this.each(function(i, el){
        el = jQuery(el), elem =    el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
        height = elem.css("height"),
        width = elem.css("width"),
        elem.remove();

        if(prop === "height")
            el.animate({"height":height}, speed, callback);
        else if(prop === "width")
            el.animate({"width":width}, speed, callback);  
        else if(prop === "both")
            el.animate({"width":width,"height":height}, speed, callback);
    });   
}

STOSOWANIE:

$(".animateHeight").bind("click", function(e){
    $(".test").animateAuto("height", 1000); 
});

$(".animateWidth").bind("click", function(e){
    $(".test").animateAuto("width", 1000);  
});

$(".animateBoth").bind("click", function(e){
    $(".test").animateAuto("both", 1000); 
});
Stan George
źródło
1
Jeśli nie chcesz używać tej funkcji, zrób coś takiego: var clone = element.clone () clone.appendTo ('body') clone.css ('height', 'auto') var itemHeight = clone.outerHeight ( ); clone.remove () teraz masz wysokość swojego przedmiotu w zmiennej itemHeight, więc możesz jej używać nie tylko do animacji.
Stan George
3

zawsze możesz to zrobić:

jQuery.fn.animateAuto = function(prop, speed, callback){
var elem, height, width;
return this.each(function(i, el){
    el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
    height = elem.css("height"),
    width = elem.css("width"),
    elem.remove();

    if(prop === "height")
        el.animate({"height":height}, speed, callback);
    else if(prop === "width")
        el.animate({"width":width}, speed, callback);  
    else if(prop === "both")
        el.animate({"width":width,"height":height}, speed, callback);
});  
}

tutaj jest skrzypce: http://jsfiddle.net/Zuriel/faE9w/2/

Zuriel
źródło
1
możesz zastąpić: .appendTo("body")przez.appendTo(el.parent())
Steffi
2

Twoje selektory wydają się nie pasować. Czy Twój element ma identyfikator „first”, czy jest to pierwszy element w każdym elemencie div?

Bezpieczniejszym rozwiązaniem byłoby użycie „this”:

// assuming the div you want to animate has an ID of first
$('#first').click(function() {
  $(this).animate({ height : 'auto' }, 1000);
});
EMMERICH
źródło
1
Ach. Wygląda na to, że znalazłeś rozwiązanie. Ze względów bezpieczeństwa nadal używałbym $(this)wewnątrz twojego modułu obsługi kliknięć.
EMMERICH
10
animate({height: 'auto'})nie ma żadnego efektu. Przynajmniej nie z jQuery 1.6.4.
Jānis Elmeris
2

Spróbuj tego ,

var height;
$(document).ready(function(){
    $('#first').css('height','auto');
    height = $('#first').height();
    $('#first').css('height','200px');
})

 $("div:first").click(function(){
  $("#first").animate({
    height: height
  }, 1000 );
});
Prakash
źródło
to nie zadziała, twoja wysokość var ​​jest dostępna w funkcji ready.
meo
zdefiniuj wysokość przed gotową funkcją i użyj tylko wysokości niż var height .. w ten sposób może zadziałać daniel
Prakash
2

Oto taki, który działa z BORDER-BOX ...

Cześć chłopaki. Oto wtyczka jQuery, którą napisałem, aby zrobić to samo, ale także uwzględnić różnice wysokości, które wystąpią, gdy box-sizingustawisz naborder-box .

Dołączyłem również wtyczkę „yShrinkOut”, która ukrywa element, zmniejszając go wzdłuż osi y.


// -------------------------------------------------------------------
// Function to show an object by allowing it to grow to the given height value.
// -------------------------------------------------------------------
$.fn.yGrowIn = function (growTo, duration, whenComplete) {

    var f = whenComplete || function () { }, // default function is empty
        obj = this,
        h = growTo || 'calc', // default is to calculate height
        bbox = (obj.css('box-sizing') == 'border-box'), // check box-sizing
        d = duration || 200; // default duration is 200 ms

    obj.css('height', '0px').removeClass('hidden invisible');
    var padTop = 0 + parseInt(getComputedStyle(obj[0], null).paddingTop), // get the starting padding-top
        padBottom = 0 + parseInt(getComputedStyle(obj[0], null).paddingBottom), // get the starting padding-bottom
        padLeft = 0 + parseInt(getComputedStyle(obj[0], null).paddingLeft), // get the starting padding-left
        padRight = 0 + parseInt(getComputedStyle(obj[0], null).paddingRight); // get the starting padding-right
    obj.css('padding-top', '0px').css('padding-bottom', '0px'); // Set the padding to 0;

    // If no height was given, then calculate what the height should be.
    if(h=='calc'){ 
        var p = obj.css('position'); // get the starting object "position" style. 
        obj.css('opacity', '0'); // Set the opacity to 0 so the next actions aren't seen.
        var cssW = obj.css('width') || 'auto'; // get the CSS width if it exists.
        var w = parseInt(getComputedStyle(obj[0], null).width || 0) // calculate the computed inner-width with regard to box-sizing.
            + (!bbox ? parseInt((getComputedStyle(obj[0], null).borderRightWidth || 0)) : 0) // remove these values if using border-box.
            + (!bbox ? parseInt((getComputedStyle(obj[0], null).borderLeftWidth || 0)) : 0) // remove these values if using border-box.
            + (!bbox ? (padLeft + padRight) : 0); // remove these values if using border-box.
        obj.css('position', 'fixed'); // remove the object from the flow of the document.
        obj.css('width', w); // make sure the width remains the same. This prevents content from throwing off the height.
        obj.css('height', 'auto'); // set the height to auto for calculation.
        h = parseInt(0); // calculate the auto-height
        h += obj[0].clientHeight // calculate the computed height with regard to box-sizing.
            + (bbox ? parseInt((getComputedStyle(obj[0], null).borderTopWidth || 0)) : 0) // add these values if using border-box.
            + (bbox ? parseInt((getComputedStyle(obj[0], null).borderBottomWidth || 0)) : 0) // add these values if using border-box.
            + (bbox ? (padTop + padBottom) : 0); // add these values if using border-box.
        obj.css('height', '0px').css('position', p).css('opacity','1'); // reset the height, position, and opacity.
    };

    // animate the box. 
    //  Note: the actual duration of the animation will change depending on the box-sizing.
    //      e.g., the duration will be shorter when using padding and borders in box-sizing because
    //      the animation thread is growing (or shrinking) all three components simultaneously.
    //      This can be avoided by retrieving the calculated "duration per pixel" based on the box-sizing type,
    //      but it really isn't worth the effort.
    obj.animate({ 'height': h, 'padding-top': padTop, 'padding-bottom': padBottom }, d, 'linear', (f)());
};

// -------------------------------------------------------------------
// Function to hide an object by shrinking its height to zero.
// -------------------------------------------------------------------
$.fn.yShrinkOut = function (d,whenComplete) {
    var f = whenComplete || function () { },
        obj = this,
        padTop = 0 + parseInt(getComputedStyle(obj[0], null).paddingTop),
        padBottom = 0 + parseInt(getComputedStyle(obj[0], null).paddingBottom),
        begHeight = 0 + parseInt(obj.css('height'));

    obj.animate({ 'height': '0px', 'padding-top': 0, 'padding-bottom': 0 }, d, 'linear', function () {
            obj.addClass('hidden')
                .css('height', 0)
                .css('padding-top', padTop)
                .css('padding-bottom', padBottom);
            (f)();
        });
};

Każdy z parametrów, których użyłem, można pominąć lub ustawić na null, aby zaakceptować wartości domyślne. Parametry, których użyłem:

  • dorosnąć do: Jeśli chcesz nadpisać wszystkie obliczenia i ustawić wysokość CSS, do której obiekt wzrośnie, użyj tego parametru.
  • duration: czas trwania animacji ( oczywiście ).
  • whenComplete: funkcja uruchamiana po zakończeniu animacji.
Przechylony
źródło
2

Przełącz slajd ( odpowiedź Box9 rozwinięta)

$("#click-me").click(function() {
  var el = $('#first'),
  curHeight = el.height(),
  autoHeight = el.css('height', 'auto').height(),
  finHeight = $('#first').data('click') == 1 ? "20px" : autoHeight;
  $('#first').data('click', $(this).data('click') == 1 ? false : true);
  el.height(curHeight).animate({height: finHeight});
});
#first {width: 100%;height: 20px;overflow:hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
  <div id="click-me">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
</div>

che-azeh
źródło
1

Publikuję tę odpowiedź, mimo że ten wątek jest stary. Nie mogłem uzyskać zaakceptowanej odpowiedzi, która zadziałała dla mnie. Ten działa dobrze i jest dość prosty.

Ładuję wysokość każdego elementu div do danych

$('div').each(function(){
    $(this).data('height',$(this).css('height'));
    $(this).css('height','20px');
});

Następnie używam tego podczas animacji kliknięciem.

$('div').click(function(){
    $(this).css('height',$(this).data('height'));
});

Używam przejścia CSS, więc nie używam animacji jQuery, ale możesz zrobić to samo.

Leeish
źródło
1

możesz go przechowywać w atrybucie danych.

$('.colapsable').each(function(){
    $(this).attr('data-oheight',$(this).height());
    $(this).height(100);
});

$('.colapsable h2:first-child').click(function(){
    $(this).parent('.colapsable').animate({
            height: $(this).parent('.colapsible').data('oheight')
        },500);
    }
});
zdefiniowane media
źródło
Zasadniczo taki sam jak jeden liniowiec Hettlera, ale łatwiejszy do zrozumienia.
Timothy Groote
1

Potrzebowałem tej funkcji dla wielu obszarów do czytania więcej na jednej stronie, implementując ją w krótkim kodzie Wordpressa. Napotkałem ten sam problem.

Zaprojektuj technicznie wszystkie rozpiętości Read more na stronie mają stałą wysokość. Chciałem móc osobno rozszerzyć je do wysokości automatycznej za pomocą przełącznika. Pierwsze kliknięcie: „rozwiń do pełnej wysokości rozpiętości tekstu”, drugie kliknięcie: „zwiń z powrotem do domyślnej wysokości 70 pikseli”

HTML

 <span class="read-more" data-base="70" data-height="null">
     /* Lots of text determining the height of this span */
 </span>
 <button data-target='read-more'>Read more</button>

CSS

span.read-more {
    position:relative;
    display:block;
    overflow:hidden;
}

Więc powyżej wygląda to bardzo prosto data-baseatrybut, którego potrzebuję, aby ustawić wymaganą stałą wysokość. Plikdata-heightAtrybut użyłem do przechowywania rzeczywistej (dynamiczny) wysokość elementu.

Część jQuery

jQuery(document).ready(function($){

  $.fn.clickToggle = function(func1, func2) {
      var funcs = [func1, func2];
      this.data('toggleclicked', 0);
      this.click(function() {
          var data = $(this).data();
          var tc = data.toggleclicked;
          $.proxy(funcs[tc], this)();
          data.toggleclicked = (tc + 1) % 2;
      });
      return this;
  };

    function setAttr_height(key) {
        $(key).each(function(){
            var setNormalHeight = $(this).height();
            $(this).attr('data-height', setNormalHeight);
            $(this).css('height', $(this).attr('data-base') + 'px' );
        });
    }
    setAttr_height('.read-more');

    $('[data-target]').clickToggle(function(){
        $(this).prev().animate({height: $(this).prev().attr('data-height')}, 200);
    }, function(){
        $(this).prev().animate({height: $(this).prev().attr('data-base')}, 200);
    });

});

Najpierw użyłem funkcji clickToggle do pierwszego i drugiego kliknięcia. Ważniejsza jest druga funkcja: setAttr_height()wszystkie .read-moreelementy mają swoje rzeczywiste wysokości ustawione podczas ładowania strony w base-heightatrybucie. Następnie wysokość bazowa jest ustawiana za pomocą funkcji jquery css.

Mając oba nasze atrybuty, możemy teraz przełączać się między nimi w płynny sposób. Tylko chang data-basedo żądanej wysokości (stałe) i przełączyć klasę .read-bardziej dla własnego ID

Wszyscy możecie zobaczyć, jak działa na skrzypcach FIDDLE

Nie jest potrzebny interfejs użytkownika jQuery

Paweł
źródło
1

Jeśli chcesz tylko pokazać i ukryć, powiedz div, ten kod pozwoli ci użyć jQuery animate. Możesz mieć jQuery animować większość wysokości, którą chcesz, lub możesz oszukać animację, animując do 0px. jQuery potrzebuje tylko wysokości ustawionej przez jQuery, aby przekonwertować ją na auto. Więc .animate dodaje style = "" do elementu, który .css (height: auto) konwertuje.

Najczystszym sposobem, w jaki widziałem tę pracę, jest animacja do oczekiwanej wysokości, a następnie ustawienie automatycznego ustawienia i może wyglądać bardzo płynnie, gdy zostanie wykonana prawidłowo. Możesz nawet animować poza tym, czego się spodziewasz, a to się cofnie. Animacja do 0 pikseli w czasie 0 po prostu obniża wysokość elementu do jego automatycznej wysokości. Dla ludzkiego oka i tak wygląda na ożywioną. Cieszyć się..

    jQuery("div").animate({
         height: "0px"/*or height of your choice*/
    }, {
         duration: 0,/*or speed of your choice*/
         queue: false, 
         specialEasing: {
             height: "easeInCirc"
        },
         complete: function() {
             jQuery(this).css({height:"auto"});
        }
    });

Przepraszam, wiem, że to stary post, ale czułem, że będzie to istotne dla użytkowników poszukujących tej funkcji nadal z jQuery, którzy natknęli się na ten post.

designdrumm
źródło
0

Złożyłem coś, co robi dokładnie to, czego szukałem i wygląda świetnie. Użycie scrollHeight elementu pozwala uzyskać wysokość, kiedy został załadowany do DOM.

 var clickers = document.querySelectorAll('.clicker');
    clickers.forEach(clicker => {
        clicker.addEventListener('click', function (e) {
            var node = e.target.parentNode.childNodes[5];
            if (node.style.height == "0px" || node.style.height == "") {
                $(node).animate({ height: node.scrollHeight });
            }
            else {
                $(node).animate({ height: 0 });
            }
        });
    });
.answer{
        font-size:15px;
        color:blue;
        height:0px;
        overflow:hidden;
       
    }
 <div class="row" style="padding-top:20px;">
                <div class="row" style="border-color:black;border-style:solid;border-radius:4px;border-width:4px;">
                    <h1>This is an animation tester?</h1>
                    <span class="clicker">click me</span>
                    <p class="answer">
                        I will be using this to display FAQ's on a website and figure you would like this.  The javascript will allow this to work on all of the FAQ divs made by my razor code.  the Scrollheight is the height of the answer element on the DOM load.  Happy Coding :)
                         Lorem ipsum dolor sit amet, mea an quis vidit autem. No mea vide inani efficiantur, mollis admodum accusata id has, eam dolore nemore eu. Mutat partiendo ea usu, pri duis vulputate eu. Vis mazim noluisse oportere id. Cum porro labore in, est accumsan euripidis scripserit ei. Albucius scaevola elaboraret usu eu. Ad sed vivendo persecuti, harum movet instructior eam ei.
                    </p>
                </div>
            </div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

JimmyTwoShoes
źródło