Всем привет.
Имеются 3 адаптивных столбца с текстовой информацией по мероприятию равной высоты в исходном состоянии независимо от количества контента в них.
Этого добился с помощью набора правил:
|
Код:
|
display: flex; flex-direction: column; align-items: stretch; |
Далее, каждый список может раскрываться по кнопке подробнее и сворачиваться по крестику, при этом должен сохранять исходную высоту других столбцов. Этого пытаюсь добиться с помощью js, но что-то ускользает из моего вида: то контент выпадает из столбцов, то блок почему-то уменьшается по высоте контента, а не по высоте, которую должен принимать и сохранять из скрипта.
Как добиться запланированного отображения, причем чтобы это был универсальный вариант независимо от количества столбцов и рядов?
фидл
UPD списки должны раскрываться и не налазить на контент ниже (по принципу аккордеона). Примерная реализация
здесь, только она пока не адаптивная и работаю над этим
var mh = 0;
$(".task-box").each(function () {
var h_block = $(this).height();
if(h_block > mh) {
mh = h_block;
}
});
$(".collapse").on("show.bs.collapse", function () {
let boxes = $(".task-box").not($(this).parents(".task-box"));
let parentBox = $(this).parents(".task-box");
parentBox.attr("aria-expanded", "true").css("height", "auto");
boxes.each(function () {
var $this = $(this);
if ( $this.attr("aria-expanded") !== "true") {
$this.height(mh);
}
});
});
$(".collapse").on('hide.bs.collapse', function () {
let parentBox = $( this ).parents(".task-box");
parentBox.attr("aria-expanded", "false").height(mh);
let boxes = $(".task-box").not($(this).parents(".task-box"));
boxes.each(function () {
if($(this).height()>mh) {
$(this).css("height", "auto");
}
else {
$(this).height(mh);
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div id="task">
<div class="row">
<div class="col-lg-4 col-sm-6 col-12 mb-5">
<div class="task-box class1" aria-expanded="false">
<div class="task-box-inner">
<h4>Lorem ipsum dolor sit amet</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem distinctio nesciunt excepturi similique totam natus, facere corrupti quas tempora. Exercitationem dolorum incidunt soluta ipsa voluptates suscipit eum harum quae veniam.</p>
<a data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="false" aria-controls="collapseevent-1">
Подробнее <i class="fa fa-plus" aria-hidden="true"></i>
</a>
<div class="collapse" id="collapseevent-1">
<div class="card card-body">
<p><i class="fa fa-users" aria-hidden="true"></i>11 человек</p>
<p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Место встречи</span></p>
<a class="join" href="#">Присоединиться</a>
<a data-toggle="collapse" href="#collapseevent-1" role="button" aria-expanded="true" aria-controls="collapseevent-1"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 col-12 mb-5">
<div class="task-box class2" aria-expanded="false">
<img class="img-fluid" src="img/event-2.jpg" alt="reportage">
<div class="task-box-inner">
<h4>Repudiandae ipsa quae molestiae quis sint. </h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<a data-toggle="collapse" href="#collapseevent-2" role="button" aria-expanded="false" aria-controls="collapseevent-2">
Подробнее <i class="fa fa-plus" aria-hidden="true"></i>
</a>
<div class="collapse" id="collapseevent-2">
<div class="card card-body">
<p><i class="fa fa-users" aria-hidden="true"></i>5 человек</p>
<p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Это замечательное местоa</span></p>
<p><i class="fa fa-commenting" aria-hidden="true"></i>Выступающий</p>
<a class="join" href="#">Присоединиться</a>
<a data-toggle="collapse" href="#collapseevent-2" role="button" aria-expanded="true" aria-controls="collapseevent-2"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 col-12 mb-5">
<div class="task-box class3" aria-expanded="false">
<img class="img-fluid" src="img/event-3.jpg" alt="reportage">
<div class="task-box-inner">
<h4>Modi, nam maxime aspernatur necessitatibus.</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, nam maxime aspernatur necessitatibus. Voluptate explicabo, numquam rerum? Ipsa explicabo voluptatum voluptas, rem aliquid, esse libero. Optio tempore repellendus accusantium aliquid.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<a data-toggle="collapse" href="#collapseevent-3" role="button" aria-expanded="false" aria-controls="collapseevent-3">
Подробнее <i class="fa fa-plus" aria-hidden="true"></i>
</a>
<div class="collapse" id="collapseevent-3">
<div class="card card-body">
<p><i class="fa fa-users" aria-hidden="true"></i>1 человек</p>
<p><i class="fa fa-map-marker" aria-hidden="true"></i><span>Нет данных</span></p>
<a class="join" href="#">Присоединиться</a>
<a data-toggle="collapse" href="#collapseevent-3" role="button" aria-expanded="true" aria-controls="collapseevent-3"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate aliquid, officia labore vel quod cupiditate veritatis temporibus incidunt consectetur molestiae. Cum voluptatibus nesciunt odit alias sint harum in, officia optio.</div>
#task .row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
p {
padding: 15px;
}
#task .row > [class*='col-'] {
display: flex;
flex-direction: column;
align-items: stretch;
margin-bottom: 20px;
}
.task-box {
position: relative;
margin: 0 auto;
color: rgb(95, 112, 135);
display: flex;
flex-direction: column;
align-items: stretch;
height: 100%;
border: 1px solid #000;
}
.task-box .task-box-inner>a[aria-expanded="true"] {
display: none;
}