Доброго времени суток.
Пробую реализовать кнопку развертывающегося блока галереи фотографий.При нажатии на нее открывается блок с фото,при повторном-скрывается.Вся проблема в том,что элементы при появлении вместо того что бы тянуть страницу вниз,тупо налазят друг на друга.Как только не игрался со свойством display,ничего не вышло.Надеюсь на вашу помощь!
<a id="toggler" href="#">Показать больше фотографий</a>
<div id="box" style="display: none;">
<div class="row tm-img-gallery">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<a href="img/tm-img-01.jpg">
<img src="img/tm-img-01-tn.jpg" alt="Image" class="img-fluid tm-img">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<a href="img/tm-img-02.jpg">
<img src="img/tm-img-02-tn.jpg" alt="Image" class="img-fluid tm-img">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<a href="img/tm-img-03.jpg">
<img src="img/tm-img-03-tn.jpg" alt="Image" class="img-fluid tm-img">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<a href="img/tm-img-04.jpg">
<img src="img/tm-img-04-tn.jpg" alt="Image" class="img-fluid tm-img">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<a href="img/tm-img-05.jpg">
<img src="img/tm-img-05-tn.jpg" alt="Image" class="img-fluid tm-img">
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-4">
<a href="img/tm-img-06.jpg">
<img src="img/tm-img-06-tn.jpg" alt="Image" class="img-fluid tm-img">
</a>
</div>
</div>
</div>
window.onload= function() {
document.getElementById('toggler').onclick = function() {
openbox('box', this);
return false;
};
};
function openbox(id, toggler) {
var div = document.getElementById(id);
if(div.style.display == 'block') {
div.style.display = 'none';
toggler.innerHTML = 'Показать больше фотографий';
}
else {
div.style.display = 'block';
toggler.innerHTML = 'Скрыть фотографии';
}
}
|
Код:
|
#toggler{
text-transform: none;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
color: white;
display: block;
font-size: 12px;
font-weight: 400;
height: 30px;
vertical-align: middle;
width: 250px;
padding:6px;
}
#toggler:hover{
background-color: rgba(255, 193, 37, 0.7);
color:#000000;
} |
