У меня есть контейнерный блок, в котором есть два других блока. Одним из них является «Дом», который появляется на левой стороне, а другой «В гостях», который появляется на правой стороне. Они расположены рядом.
Внутри этих div находятся другие div, и есть Javascript, поэтому при нажатии элемента он отображает / скрывает другие div с помощью дисплея CSS.
Однако, когда я скрываю / показываю их, высота родительского элемента не регулируется, поэтому вы не можете видеть показанный элемент div, когда открываете более одного.
Пример ниже:
$("document").ready(function () {
setupInjuries();
});
function setupInjuries() {
$(".match-injury").each(function () {
var helpIcon = $(this).find(".match-injury-icon");
var shortDescription = $(this).find(".match-injury-shortdescription");
var latestButton = $(this).find(".match-injury-latestbutton");
var longDescription = $(this).find(".match-injury-longdescription");
helpIcon.click(function () {
if (shortDescription.css("display") == "none") {
shortDescription.css("display", "block");
}
else {
shortDescription.css("display", "none");
longDescription.css("display", "none");
latestButton.text("SEE LATEST");
}
});
latestButton.click(function () {
if (longDescription.css("display") == "none") {
longDescription.css("display", "block");
$(this).text("HIDE LATEST");
}
else {
longDescription.css("display", "none");
$(this).text("SEE LATEST");
}
});
});
}
.match-injuries-container {
width: 100%;
height: 135px;
background-color: #e5e5e5;
overflow: hidden;
}
.match-injuries-home {
width: 50%;
float: left;
text-align: center;
display: inline-block;
border-left: 1px solid #9c9c9c;
background-color: #e5e5e5;
}
.match-injuries-away {
width: 50%;
float: right;
text-align: center;
display: inline-block;
border-right: 1px solid #9c9c9c;
background-color: #e5e5e5;
}
.match-injury {
width: 100%;
height: auto;
background-color: #d3d3d3;
font-size: 13px;
font-weight: bold;
border-bottom: 1px solid #9c9c9c;
border: 1px solid #9c9c9c;
border-left: none;
cursor: default;
position: relative;
}
.match-injury-detail {
height: 25px;
padding: 3px 3px 3px 3px;
}
.match-injury-player {
color: #5b5b5b;
}
.match-injury-status {
margin-left: 5px;
color: #d20000;
}
.match-injury-icon {
position: absolute;
right: 5px;
top: 0;
font-size: 15px;
color: #2b3180;
cursor: pointer;
}
.match-injury-descriptions {
padding: 3px 3px 3px 3px;
}
.match-injury-shortdescription {
font-size: 10px;
background-color: #f0f0f0;
height: auto;
padding: 3px 3px 3px 3px;
font-weight: normal;
display: none;
}
.match-injury-longdescription {
font-size: 10px;
background-color: #f0f0f0;
height: auto;
padding: 3px 3px 3px 3px;
font-weight: normal;
font-style: italic;
display: none;
}
.match-injury-latestbutton {
background-image: linear-gradient(#e5e5e5,#ffffff,#e5e5e5);
width: 100%;
height: 18px;
text-align: center;
border: 1px solid #bbbbbb;
font-size: 10px;
font-weight: bold;
cursor: pointer;
padding-top: 2px;
}
.match-injury-border {
width: 100%;
height: 4px;
background-image: linear-gradient(#9a9a9a, white, #9a9a9a);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<div class="match-injuries-container">
<div class="main-header-bar">Injuries</div>
<div class="match-injuries-home">
<div class="match-injury">
<span class="match-injury-player">Player Name 1</span>
<span class="match-injury-status">OUT</span>
<div class="match-injury-icon"><i class="fa fa-info-circle"></i></div>
<div class="match-injury-shortdescription">
Quadricepts - Expected to be out until atleast July 1st
<div class="match-injury-latestbutton">SEE LATEST</div>
</div>
<div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>
</div>
<div class="match-injury-border"></div>
<div class="match-injury">
<span class="match-injury-player">Player Name 2</span>
<span class="match-injury-status">OUT</span>
<span class="match-injury-icon"><i class="fa fa-info-circle"></i></span>
<div class="match-injury-shortdescription">
Quadricepts - Expected to be out until atleast July 1st
<div class="match-injury-latestbutton">SEE LATEST</div>
</div>
<div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>
</div>
<div class="match-injury-border"></div>
<div class="match-injury">
<span class="match-injury-player">Player Name 3</span>
<span class="match-injury-status">OUT</span>
<span class="match-injury-icon"><i class="fa fa-info-circle"></i></span>
<div class="match-injury-shortdescription">
Quadricepts - Expected to be out until atleast July 1st
<div class="match-injury-latestbutton">SEE LATEST</div>
</div>
<div class="match-injury-longdescription">Cousins is unlikely to return this post season, but he wont require surgery on the torn left quadriceps muscle sustained during the firsty quarter of game 2 again the Clipper's on Monday.</div>
</div>
</div>
<div class="match-injuries-away">
<span style="font-size:13px;">No reported injuries</span>
</div>
</div>
Как настроить высоту контейнера для его дочерних элементов в зависимости от их высоты / состояния отображения?