Форум

lev90 · #1 (**permalink**) 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>

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

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

рони · #2 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript