Показать скрыть элемент [Архив форума]

lev90

31.01.2021, 21:20

Добрый день.

В интернете нашел пример скрипта, который показывает и скрывает элементы независимо друг от друга.

<style type="text/css">
.collapsible {
background-color: #777;
color: white;
cursor: pointer:
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.collapsible: hover {
background-color: #555;
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>

<div class="conteiner">
<div>
<div>
<button class="collapsible">Open Collapsible</button>
</div>
</div>
<div class="content">
<p>text</p>
</div>
<div>
<div>
<button class="collapsible">Open Collapsible</button>
</div>
</div>
<div class="content">
<p>text</p>
</div>
<p>My texst</p>
<div>
<div>
<button class="collapsible">Open Collapsible</button>
</div>
</div>
<div class="content">
<p>text</p>
</div>
</div>

<script>
let coll = document.getElementsByClassName('collapsible');
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function () {
this.classList.toggle('active');
let content = this.parentNode.parentNode.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + 'px'
}
})
}
</script>

Скрипт работает. Но если я оборачиваю кнопку в дополнительные div-ы, то скрипт уже не работает.

<div class="conteiner">
<div>
<div>
<div>
<div> Всего 4 </div>
</div>
<div>
<div><span class="collapsible"> Показать/ скрыть</span></div> 
</div>
<div>
<div>
<div><button color="white">Обзор</button>
<div><button color="white">Подробнее</button></div>
</div>
<div>Текст</div>
</div>
</div>
</div>
</div>

<div class="content"> 
<div>
<div>
<div>Текст</div>
</div>
<div>
<div>
<div>Текст<div>Текст</div></div>
</div>
</div>
</div>
</div>
</div>

Подскажите пожалуйста, как можно исправить. И как можно сделать автоматическую смену надписей "Показать" и "скрыть".

Заранее всем спасибо!

рони

31.01.2021, 22:17

lev90,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.collapsible {
background-color: #777;
color: white;
cursor: pointer;
padding: 2px 4px;
margin: 6px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}

.collapsible:hover {
background-color: #555;
}
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 1.2s ease-out;
background-color: #f1f1f1;
}

.conteiner.active .collapsible:after {
content: 'Скрыть';
}
.conteiner .collapsible:after {
content: 'Показать';
}
.conteiner.active .content {
max-height: var(--maxH);
}
.conteiner.active .collapsible {
background-color: #555;
}
</style>
</head>

<body>
<div class="conteiner">
<div>
<div>
<div>
<div> Всего 4 </div>
</div>
<div>
<div><span class="collapsible"></span></div> 
</div>
<div>
<div>
<div><button color="white">Обзор</button>
<div><button color="white">Подробнее</button></div>
</div>
<div>Текст</div>
</div>
</div>
</div>
</div>

<div class="content"> 
<div>
<div>
<div>Текст</div>
</div>
<div>
<div>
<div>Текст<div>Текст</div></div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const on = (parent, event, selector, handler) =>
parent.addEventListener(event, ({target}) => {
if (target = target.closest(selector)) handler(target)
})
const fn = el => {
let parent = el.closest('.conteiner');
let content = parent.querySelector('.content');
content.style.setProperty('--maxH', `${content.scrollHeight}px`);
parent.classList.toggle('active');
}
on(document, "click", ".collapsible", fn);
});
</script>
</body>
</html>