Высота анимированного элемента-сиблинга на основе высоты анимации элемента

Question

Родитель Sub Block Toggle имеет переменную высоту. При нажатии на кнопку Sub Block Toggle блок Lorem Ipsum должен уменьшаться и расширяться в зависимости от высоты слева.

Sub Block не может иметь цвет фона, так что это не вопрос простого перекрытия Lorem Ipsum с фоном Sub Block.

Это оставляет меня с анимацией высоты текста Lorem Impsum, но поскольку высота Sub Block является переменной, а onload - скрытой, я не могу использовать scrollHeight.

Любой может указать мне в правильном направлении?

Большое значение.

$('.footer-subblock-title').on('click', function(el) { 
 
    console.log('clicked'); 
 
    $(this).next().animate({ 
 
    height: ["toggle", "swing"] 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.body { 
 
    width: 500px; 
 
    height: 800px; 
 
    background: #bae0c4; 
 
    position: relative; 
 
    font: 14px/1.65em Arial; 
 
} 
 
.body .container { 
 
    top: 30px; 
 
    position: absolute; 
 
    left: 20%; 
 
    width: 80%; 
 
} 
 
.body .container .footer-block { 
 
    border: 2px solid #000; 
 
    bottom: -40px; 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
.body .container .footer-subblock { 
 
    overflow: hidden; 
 
} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="body"> 
 
    <div class="container"> 
 
    <h3 class="title"> 
 
     Title Goes Here 
 
    </h3> 
 
    <div class="text"> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </div> 
 
    <div class="footer-block"> 
 
     <h4 class="footer-subblock-title"> 
 
     Sub Block Toggle 
 
     </h4> 
 
     <div class="footer-subblock" style="display:none;"> 
 
     Lorem Ipsum is simply dummy text 
 
     <br/>Lorem Ipsum is simply dummy text 
 
     <br/>Lorem Ipsum is simply dummy text 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/32dk3txg/

Answer 1

мне удалось сделать это с небольшим JQuery. Проверьте рабочий пример в CODEPEN .Since ваш HTML разметки были некоторые проблемы с ненужными дивы, я сделал это немного проще, но принцип решения будет работать с кодом, а также:

JS

$(document).ready(function() { 
    var origMaxHeight = $(".sub-block").css("max-height"); 
    var newHeight = $(".sub-block").height(); 

    $(".sub-block").click(function() { 

    if ($(this).css("max-height") == origMaxHeight) { 
     $(this).stop(true,true).animate({ 
     maxHeight: "10em" 
     }, { 
     duration: 500, 
     queue: false, 
     progress: function() { 
      $(".text").height($(".text").height() - $(this).height() + newHeight); 
      newHeight = $(this).height(); 
     } 
     }); 


    } else { 
     $(this).stop(true,true).animate({ 
     maxHeight: "1em" 
     }, { 
     duration: 500, 
     queue: false, 
     progress: function() { 
      $(".text").height($(".text").height() - $(this).height() + newHeight); 
      newHeight = $(this).height(); 
     } 
     }); 
    } 
    }) 
}); 

Идея состоит в том, чтобы использовать progress callback на animate Функция для изменения высоты элемента text на каждом шаге. Оператор if на $(this).css("max-height") позволит нам отличить первый клик (который увеличивает .sub-block height) от второго щелчка (который как-то закрывает элемент .sub-block). Остальное очень прямолинейно. Надеюсь, что еще не поздно :)