Фильтруемый DIV не будет показывать все, пока не будет нажата кнопка ⇐ CSS

[Anonymous]

Я использую пример «Элементы фильтра» из W3Schools для шаблона страницы, чтобы посетитель мог фильтровать списки по количеству спален. Кнопки фильтров работают корректно, однако при первой загрузке страницы все списки скрыты. Кнопка «Показать все» активна, как в примере W3Schools, однако вам все равно придется нажать «Показать все», прежде чем она загрузит скрытый контент.
Вот пример W3Schools: https://www.w3schools.com/howto/tryit.a ... r_elements
Вот моя тестовая страница с проблемой: https://lakewoodcampground.com/properties-test -page/
Мне нужно, чтобы страница загружалась со всеми видимыми списками. По сути, все начинается с активной кнопки «Показать все», но при загрузке страницы списки скрыты.

Код: Выделить всё

.btn {
margin: 0 10px;
padding: 12px 16px;
border: none;
outline: none;
background-color: #368BA9;
cursor: pointer;
color: #fff;
text-transform: uppercase;
font-size: 1.1em;
text-align: center;
display: inline-block;
}

.btn:hover {
background-color: #777;
}

.btn.active {
background-color: #555;
}

.propBox {
width: calc(33.33% - 30px);
margin-bottom: 50px;
border: 4px solid #378AA9;
text-align: center;
}

.filterDiv {
display: none;
}

.show {
display: block;
}

Код: Выделить всё

 Show all
 1 Bedroom
 2 Bedroom
 3 Bedroom
 4 Bedroom
 5 Bedroom


filterSelection("all")

function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}

function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}

function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}




[url=#]
[i]
[/url]

Site #1234
1 Beds | 2 Baths | Sleeps 6
Annual Lot Lease: $999



[url=#]
[img]https://placehold.co/100x100.jpg[/img]
[/url]

Site #1234
1 Beds | 2 Baths | Sleeps 5
Annual Lot Lease: $899





[url=#]
[img]https://placehold.co/100x100.jpg[/img]
[/url]

Site #1234
2 Beds | 2 Baths | Sleeps 6
Annual Lot Lease: $989





[url=#]
[img]https://placehold.co/100x100.jpg[/img]

[/i]

[/url]

Site #1234
3 Beds | 2 Baths | Sleeps 6
Annual Lot Lease: $999





[url=#]
[img]https://placehold.co/100x100.jpg[/img]
[/url]

Site #1234
4 Beds | 2 Baths | Sleeps 6
Annual Lot Lease: $999





[url=#]
[img]https://placehold.co/100x100.jpg[/img]
[/url]

Site #1234
5 Beds | 3 Baths | Sleeps 6
Annual Lot Lease: $999

Подробнее здесь: https://stackoverflow.com/questions/784 ... on-clicked