[lolok]

Доброго времени суток.
Пробую реализовать кнопку развертывающегося блока галереи фотографий.При нажатии на нее открывается блок с фото,при повторном-скрывается.Вся проблема в том,что элементы при появлении вместо того что бы тянуть страницу вниз,тупо налазят друг на друга.Как только не игрался со свойством 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;
}