Elemen animasi ke tinggi otomatis dengan jQuery


171

Saya ingin menghidupkan <div>dari 200pxke autoketinggian. Sepertinya saya tidak bisa membuatnya bekerja. Adakah yang tahu bagaimana caranya?

Berikut kodenya:

$("div:first").click(function(){
  $("#first").animate({
    height: "auto"
  }, 1000 );
});

14
Anda harus menandai jawaban terbaik yang diterima.
kleinfreund


@IanMackinnon pertanyaan ini tentu memiliki jawaban yang lebih baik. Saya telah menutup pertanyaan itu sebagai duplikat dari ini.
Hantu Madara

Jawaban:


254
  1. Simpan ketinggian saat ini:

    var curHeight = $('#first').height();
  2. Pindahkan ketinggian sementara ke otomatis:

    $('#first').css('height', 'auto');
  3. Dapatkan ketinggian otomatis:

    var autoHeight = $('#first').height();
  4. Beralih kembali ke curHeightdan hidupkan ke autoHeight:

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

Dan bersama-sama:

var el = $('#first'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 1000);

@Aniel, di mana kode JS Anda? Posting sedikit itu, dan juga bagian-bagian dari HTML yang menunjukkan elemen yang Anda rujuk.
David Tang

21
Ini berfungsi, tetapi saya menambahkan panggilan balik yang mengembalikan perilaku tumbuh-otomatis ke elemen .animated({height: autoHeight}, 1000, function(){ el.height('auto'); });
rg89

Berhati-hatilah dalam mengatur ketinggian tetap pada desain responsif. Itu berubah menjadi berantakan jika pengguna mengubah ukuran layar. Terbaik untuk mengatur ketinggian ke 'otomatis' setelah animasi selesai.
Jonathan Tonge

4
Ini berpotensi menyebabkan FOUC. Pengguna mungkin melihat elemen melompat ke ketinggian penuh selama sepersekian detik sebelum menjiwai.
Dingredient

1
Anda dapat mencegah FOUC ("flash konten yang tidak dilumpuhkan") dengan memberi elemen pada awalnya opacity: 0; position: absolute;saat mengukurnya dan menghapus yang sudah selesai.
JacobEvelyn

194

IMO ini adalah solusi terbersih dan termudah:

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

Penjelasan: DOM sudah tahu dari rendering awal berapa ukuran div yang diperluas ketika diatur ke tinggi otomatis. Properti ini disimpan di simpul DOM sebagai scrollHeight. Kita hanya perlu mengambil Elemen DOM dari Elemen jQuery dengan menelepon get(0)dan kemudian kita dapat mengakses properti.

Menambahkan fungsi panggilan balik untuk mengatur ketinggian ke otomatis memungkinkan respons yang lebih besar setelah animasi selesai (credit chris-williams ):

$('#first').animate({
    height: $('#first').get(0).scrollHeight
}, 1000, function(){
    $(this).height('auto');
});

2
Luar biasa! Menurut developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight bahkan didukung di IE8, dibandingkan dengan clientHeight, yang tampaknya tidak didukung: developer.mozilla.org/en-US/docs/Web/ API / Element.clientHeight
Sven

1
Margin adalah dengan definisi model kotak bukan bagian dari ketinggian suatu objek. Anda selalu bisa menambahkan margin sendiri.
Liquinaut

22
Ini harus menjadi jawaban yang diterima karena ia bekerja paling baik tanpa berkedip dan benar-benar bekerja dengan baik
Einius

7
Saya juga berpikir ini adalah solusi terbaik. Saya akan menambahkan fungsi callback untuk mengatur ketinggian ke otomatis agar lebih responsif. $('#first').animate({ height: $('#first').get(0).scrollHeight }, 1000, function() { $(this).height('auto'); });
Chris Williams

1
Wow, ini sangat elegan. Ini juga berfungsi dengan scrollWidthanimasi lebar.
nil

24

Ini pada dasarnya adalah pendekatan yang sama dengan jawaban oleh Box9 tapi saya membungkusnya dalam plugin jquery bagus yang mengambil argumen yang sama dengan animasi biasa , karena ketika Anda perlu memiliki lebih banyak parameter animasi dan bosan mengulangi kode yang sama berulang-ulang :

;(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);

sunting: rantai dan bersih sekarang


23

Solusi yang lebih baik tidak akan bergantung pada JS untuk mengatur ketinggian elemen Anda. Berikut ini adalah solusi yang menggerakkan elemen ketinggian tetap ke ketinggian penuh ("otomatis"):

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


2
Oneliner ini tidak mudah dimengerti, mungkin menulis beberapa baris akan membantu orang lain sedikit lebih baik.
Jaap

Ini adalah solusi terbaik karena ketinggian otomatis dapat berubah jika pengguna menyesuaikan ukuran jendela. Lihat yang berikut: // menghidupkan ketinggian fungsi filter toggleSlider () {if ($ ('# filter'). Height ()! = 0) {$ ('# filter'). Animate ({height: '0 '}); } else {var $ selector = $ ('# filter'); $ 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

Bekerja untuk membuat div terbuka, tetapi tidak menghidupkan lebih dari 400 ms. Mungkin saya memiliki sesuatu yang berbeda, tetapi hanya terbuka dalam sekejap.
ntgCleaner

Bekerja tetapi ini menetapkan heightnilai tetap (mis. 122px). Elemen saya berubah ketinggian setelah beberapa saat, jadi saya harus mengganti argumen durasi (400) dengan opsi{duration: 400, complete: function() {$selector.css('height', 'auto');}}
jsruok

12

ini berfungsi dan ini lebih simpel daripada solusi sebelumnya:

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");
        }

    })
});

Catatan: Solusi ini membutuhkan jQuery UI


1
Harus disebutkan bahwa ini memerlukan plugin Jquery UI, sementara pertanyaan aslinya adalah tentang jquery saja. Tetapi jika Anda menggunakan Jquery UI, itu berfungsi.
user56reinstatemonica8

4
Anda juga bisa menggunakan $ (ini) .toggleClass ('maks', 250); alih-alih menggunakan pernyataan if
Antoine Hedgecock

1
mengapa Anda memasukkan nilai kedua dengan .addClassdan .removeClass?
bowl0stu

9
var h = document.getElementById('First').scrollHeight;
$('#First').animate({ height : h+'px' },300);

7

Anda selalu dapat membungkus elemen turunan #first dan menyimpan ketinggian tinggi pembungkus sebagai variabel. Ini mungkin bukan jawaban yang paling cantik atau paling efisien, tetapi itu yang berhasil.

Ini biola di mana saya memasukkan reset.

tetapi untuk tujuan Anda, inilah daging & kentang:

$(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            
    })
});
});​

5

Gunakan slideDown dan slideUp

$("div:first").click(function(){ $("#first").slideDown(1000); });

1
Ini tidak menyelesaikan ketinggian: fungsi otomatis karena slideUp sepenuhnya akan menutup div.
Jaap

5

Saya berhasil memperbaikinya: D inilah kode.

var divh = document.getElementById('first').offsetHeight;
$("#first").css('height', '100px');
$("div:first").click(function() {
  $("#first").animate({
    height: divh
  }, 1000);
});

4

Anda dapat membuat jawaban Liquinaut responsif terhadap perubahan ukuran jendela dengan menambahkan panggilan balik yang mengatur ketinggian kembali ke otomatis.

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

4

Pada dasarnya ketinggian otomatis hanya tersedia untuk Anda setelah elemen diberikan. Jika Anda menetapkan ketinggian tetap, atau jika elemen Anda tidak ditampilkan, Anda tidak dapat mengaksesnya tanpa trik.

Untungnya ada beberapa trik yang bisa Anda gunakan.

Kloning elemen, tampilkan di luar tampilan, berikan ketinggian secara otomatis dan Anda dapat mengambilnya dari klon dan menggunakannya nanti untuk elemen utama. Saya menggunakan fungsi ini dan tampaknya berfungsi dengan baik.

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);
    });   
}

PEMAKAIAN:

$(".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); 
});

1
Jika Anda tidak ingin menggunakan fungsi itu lakukan saja sesuatu seperti: var clone = element.clone () clone.appendTo ('body') clone.css ('height', 'auto') var itemHeight = clone.outerHeight ( ); clone.remove () sekarang Anda memiliki tinggi item Anda dalam variabel itemHeight, sehingga Anda dapat menggunakannya untuk lebih dari sekedar animasi.
Stan George

3

Anda selalu dapat melakukan ini:

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);
});  
}

di sini adalah biola: http://jsfiddle.net/Zuriel/faE9w/2/


1
Anda dapat mengganti: .appendTo("body")oleh.appendTo(el.parent())
Steffi

2

Penyeleksi Anda sepertinya tidak cocok. Apakah elemen Anda memiliki ID 'pertama', atau apakah itu elemen pertama di setiap div?

Solusi yang lebih aman adalah menggunakan 'ini':

// assuming the div you want to animate has an ID of first
$('#first').click(function() {
  $(this).animate({ height : 'auto' }, 1000);
});

1
Ah. Nah, sepertinya Anda sudah menemukan solusinya. Untuk keamanan, saya masih menggunakan $(this)di dalam handler klik Anda.
EMMERICH

10
animate({height: 'auto'})tidak memiliki efek apa pun. Setidaknya, tidak dengan jQuery 1.6.4.
Jānis Elmeris

2

Coba yang ini ,

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 );
});

ini tidak akan berfungsi ketinggian var Anda hanya dapat diakses di dalam fungsi siap.
meo

tentukan ketinggian sebelum fungsi siap, dan gunakan hanya tinggi dari tinggi var .. dengan cara ini bisa bekerja daniel
Prakash

2

Inilah yang berfungsi dengan BORDER-BOX ...

Hai kawan. Berikut ini adalah plugin jQuery yang saya tulis untuk melakukan hal yang sama, tetapi juga memperhitungkan perbedaan tinggi yang akan terjadi ketika Anda telah box-sizingmenyetel ke border-box.

Saya juga menyertakan plugin "yShrinkOut" yang menyembunyikan elemen dengan menyusutkannya di sepanjang sumbu 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)();
        });
};

Parameter apa pun yang saya gunakan dapat dihilangkan atau diatur ke nol untuk menerima nilai default. Parameter yang saya gunakan:

  • growTo: Jika Anda ingin mengesampingkan semua perhitungan dan mengatur tinggi CSS tempat objek akan tumbuh, gunakan parameter ini.
  • durasi: Durasi animasi ( jelas ).
  • whenComplete: Suatu fungsi untuk dijalankan ketika animasi selesai.

2

Toggle slide ( jawaban Box9 diperluas)

$("#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>


1

Saya memposting jawaban ini meskipun utas ini sudah lama. Saya tidak bisa mendapatkan jawaban yang diterima untuk bekerja untuk saya. Yang ini berfungsi dengan baik dan sangat sederhana.

Saya memuat tinggi setiap div yang saya inginkan ke dalam data

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

Lalu saya hanya menggunakannya saat menghidupkan klik.

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

Saya menggunakan transisi CSS, jadi saya tidak menggunakan jQuery animate, tetapi Anda bisa melakukan animate sama saja.


1

Anda dapat menyimpannya dalam atribut data.

$('.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);
    }
});

Intinya sama dengan Hettler's one liner, tetapi lebih mudah dimengerti.
Timothy Groote

1

Saya membutuhkan fungsionalitas ini untuk banyak membaca lebih banyak area pada satu halaman mengimplementasikan ini ke dalam shortcode Wordpress saya mengalami masalah yang sama.

Desain secara teknis semua bacaan lebih lanjut pada halaman memiliki ketinggian tetap. Dan saya ingin dapat mengembangkannya secara terpisah ke ketinggian otomatis dengan toggle. Klik pertama: 'perluas rentang teks penuh', klik kedua: 'runtuh kembali ke ketinggian default 70px'

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;
}

Jadi di atas ini terlihat sangat sederhana data-baseatribut yang saya butuhkan untuk mengatur ketinggian tetap yang dibutuhkan. The data-heightatribut Aku digunakan untuk menyimpan aktual (dinamis) tinggi dari elemen.

Bagian 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);
    });

});

Pertama saya telah menggunakan fungsi clickToggle untuk klik pertama dan kedua saya. Fungsi kedua lebih penting: setAttr_height()Semua .read-moreelemen memiliki ketinggian aktual yang ditetapkan pada pemuatan halaman dalam base-heightatribut. Setelah itu ketinggian dasar diatur melalui fungsi jquery css.

Dengan kedua set atribut kami, kami sekarang dapat beralih di antara mereka dengan cara yang mulus. Hanya ubah data-baseke ketinggian (tetap) yang Anda inginkan dan alihkan kelas .read-more untuk ID Anda sendiri

Anda semua bisa melihatnya bekerja di FIDDLE biola

Tidak diperlukan jQuery UI


1

Jika yang Anda inginkan adalah menampilkan dan menyembunyikan say a div, maka kode ini akan memungkinkan Anda menggunakan jQuery untuk menghidupkan. Anda dapat membuat jQuery menghidupkan sebagian besar ketinggian yang Anda inginkan atau Anda bisa mengelabui animasi dengan menjiwai ke 0px. jQuery hanya membutuhkan ketinggian yang ditetapkan oleh jQuery untuk mengubahnya menjadi otomatis. Jadi .animate menambahkan style = "" ke elemen yang dikonversi .css (height: auto).

Cara terbersih saya telah melihat pekerjaan ini adalah untuk menghidupkan sekitar ketinggian yang Anda harapkan, kemudian biarkan mengatur otomatis dan dapat terlihat sangat mulus ketika dilakukan dengan benar. Anda bahkan dapat menghidupkan masa lalu apa yang Anda harapkan dan itu akan kembali. Animasi ke 0px pada durasi 0 hanya cukup menjatuhkan ketinggian elemen ke ketinggian otomatisnya. Bagi mata manusia, itu tetap terlihat animasi. Nikmati..

    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"});
        }
    });

Maaf saya tahu ini adalah posting lama, tetapi saya merasa ini akan relevan bagi pengguna yang mencari fungsi ini masih dengan jQuery yang menemukan posting ini.


0

Saya mengumpulkan sesuatu yang melakukan persis apa yang saya cari dan tampak hebat. Menggunakan scrollHeight suatu elemen membuat Anda ketinggian ketika itu dimuat di 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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.