Как я могу получить скрытую высоту div для этой функции show/hide в стиле аккордеона?

Question

Я пытаюсь заставить это шоу скрыть работать плавно. Когда я использую просто

$(this).find(".less").toggleClass("more");

Он работает хорошо, но это нервное, поэтому я попытался добавить .animate на высоту, однако это не представляется возможным использовать высоту auto в JQuery. Как я могу сделать этот аккордеон слайдом и скользить вниз, как он построен?

Любые предложения приветствуются. Вот ссылка на скрипку: https://jsfiddle.net/jennbrewer/ad42504c/8/

$(function accordion(){ 
     $(".accordion").click(function() { 


      $(this).find(".less").toggleClass("more"); 

      var height = $('.accordion .less').show().height(); 
      $('.accordion .less').hide(); 

      $('.accordion .less').show(); 

      console.log(height); 

      if (($(this).find('.less').hasClass('more'))) { 

        $(this).find('.less').animate({ 
         height: height, 
        },400)      
       } else { 

       $(this).find('.less').animate({ 
         height:"20px", 
        },400) 
       } 
       return false; 

      }); 
    }); 

Answer 1

вы можете использовать свойства scrollHeight как тогда, когда DOM сначала создается каждый элемент магазина его полная высота в этом свойстве, увидеть следующее для более подробной информации:

$(function() { 
 
    $(".accordion").click(accordion); 
 
}); 
 

 
function accordion() { 
 
    var text = $(this).find("div"); 
 
    var height = text.get(0).scrollHeight; 
 

 
    if ($(text).hasClass('less')) { 
 
    $(text).animate({ 
 
     height: height 
 
    }, 400); 
 
    toggle(text); 
 
    } else { 
 
    $(text).animate({ 
 
     height: 20 
 
    }, 400); 
 
    toggle(text); 
 
    } 
 
} 
 

 
function toggle(text) { 
 
    $(text).toggleClass("less"); 
 
    $(text).toggleClass("more"); 
 
}

.accordion-wrap { 
 
    margin: auto; 
 
    transition: all 0.5s; 
 
    cursor: pointer; 
 
} 
 
.accordion-wrap .accordion { 
 
    padding: 30px 20px; 
 
    text-align: left; 
 
    border: 1px solid #dbdbdb; 
 
    transition: all 500ms linear; 
 
    margin-bottom: -1px; 
 
} 
 
.accordion-wrap .selected { 
 
    border: 1px solid red; 
 
    margin: -1px 0; 
 
    position: relative; 
 
} 
 
.accordion-wrap button, 
 
.accordion-wrap p { 
 
    display: block; 
 
    margin: auto; 
 
} 
 
.accordion-wrap p { 
 
    color: #0a0a0a; 
 
} 
 
.accordion-wrap .less, 
 
.accordion-wrap .more { 
 
    width: 80%; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 
.accordion-wrap .less { 
 
    height: 20px; 
 
    overflow: hidden; 
 
} 
 
.accordion-wrap .more { 
 
    height: auto; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="accordion-wrap"> 
 

 
    <div class="accordion"> 
 
    <div class="less"> 
 
     Ipse eorum Ipse eorum opinionibus accedo, qui Germaniae... Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania... 
 
    </div> 
 
    </div> 
 
    <div class="accordion"> 
 
    <div class="less"> 
 
     Ipse eorum Ipse eorum opinionibus accedo, qui Germaniae... Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania... Ipse eorum opinionibus accedo, qui Germaniae.. 
 
    </div> 
 
    </div> 
 
    <div class="accordion"> 
 
    <div class="less"> 
 
     Ipse eorum Ipse eorum opinionibus accedo, qui Germaniae... Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania... Ipse eorum opinionibus accedo, qui Germaniae.. Ipse eorum opinionibus accedo, qui Germaniae.. Ipse eorum 
 
     opinionibus accedo, qui Germaniae.. 
 
    </div> 
 
    </div> 
 
    <div class="accordion"> 
 
    <div class="less"> 
 
     Ipse eorum Ipse eorum opinionibus accedo, qui Germaniae... Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania... 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

Display никто не удаляет макет со страницы, так что высота всегда будет 0. Я бы установить opacity этих элементов к 0, так непрозрачности (или visibility: hidden;) скроет элемент на странице, но сохранит его макет/высоту, а затем, когда плагин выстреливает, захватите высоту каждого, назначьте атрибут данных, затем установите фиксированную высоту и уменьшите прозрачность до 1. Затем нажмите click, aimate либо фиксированная высота, либо высота атрибута данных, основанная на классе открытого или нет аккордеона.

$(function accordion() { 
 
    $('.accordion > div').each(function() { 
 
    var height = $(this).outerHeight(); 
 
    $(this).attr('data-height', height); 
 
    $(this).addClass('less'); 
 
    }); 
 
    $(".accordion").click(function() { 
 
    var $less = $(this).find('.less'), 
 
     height = $less.attr('data-height') + 'px'; 
 

 
    $less.toggleClass('open'); 
 

 
    if (($less.hasClass('open'))) { 
 

 
     $less.animate({ 
 
     height: height, 
 
     }, 400) 
 
    } else { 
 

 
     $less.animate({ 
 
     height: "20px", 
 
     }, 400) 
 
    } 
 
    return false; 
 

 
    }); 
 
});

.accordion-wrap { 
 
    margin: auto; 
 
    transition: all 0.5s; 
 
    cursor: pointer; 
 
} 
 

 
.accordion-wrap .accordion { 
 
    padding: 30px 20px; 
 
    text-align: left; 
 
    border: 1px solid #dbdbdb; 
 
    transition: all 500ms linear; 
 
    margin-bottom: -1px; 
 
} 
 

 
.accordion-wrap .selected { 
 
    border: 1px solid red; 
 
    margin: -1px 0; 
 
    position: relative; 
 
} 
 

 
.accordion-wrap button, 
 
.accordion-wrap p { 
 
    display: block; 
 
    margin: auto; 
 
} 
 

 
.accordion-wrap p { 
 
    color: #0a0a0a; 
 
} 
 

 
.accordion-wrap .less, 
 
.accordion-wrap .more { 
 
    width: 80%; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
} 
 

 
.accordion-wrap .less { 
 
    opacity: 1; 
 
    height: 20px; 
 
    overflow: hidden; 
 
} 
 

 
.accordion > div { 
 
    opacity: 0; 
 
    transition: opacity .5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="accordion-wrap"> 
 

 
    <div class="accordion"> 
 
    <div class=""> 
 
     Ipse eorum Ipse eorum opinionibus accedo, qui Germaniae... Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania... 
 
    </div> 
 
    </div> 
 
    <div class="accordion"> 
 
    <div class=""> 
 
     Ipse eorum Ipse eorum opinionibus accedo, qui Germaniae... Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania... Ipse eorum opinionibus accedo, qui Germaniae.. 
 
    </div> 
 
    </div> 
 
    <div class="accordion"> 
 
    <div class=""> 
 
     Ipse eorum Ipse eorum opinionibus accedo, qui Germaniae... Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania... Ipse eorum opinionibus accedo, qui Germaniae.. Ipse eorum opinionibus accedo, qui Germaniae.. Ipse eorum 
 
     opinionibus accedo, qui Germaniae.. 
 
    </div> 
 
    </div> 
 
    <div class="accordion"> 
 
    <div class=""> 
 
     Ipse eorum Ipse eorum opinionibus accedo, qui Germaniae... Personalmente inclino verso l'opinione di quanti ritengono che i popoli della Germania... 
 
    </div> 
 
    </div> 
 

 
</div>